第十一章:DOM扩展
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .aa { color: red; } </style> <body> <h3>我是标题</h3> <ul> <li class="a b">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <input type="text" data-id="1"> <div class=" aa bb cc ">dasfasdasdsd</div> <script> /* * * * */ var lis = document.querySelectorAll('li') var ul = document.querySelector('ul'); var h3 = document.querySelector('h3'); var li = document.getElementsByClassName(' b a'); console.log(li) console.log(h3); console.log(lis); /*元素遍历*/ console.log(ul.childElementCount);//返回子元素个数 console.log(ul.firstElementChild);//第一个子元素节点 console.log(ul.lastElementChild);//最后一个子元素节点 console.log(h3.previousElementSibling);//上一个元素节点 console.log(h3.nextElementSibling);//下一个元素节点 /*classList属性*/ var div = document.getElementsByClassName('cc aa bb').item(0); console.log(div); var classNames = div.className; console.log(classNames) var arr = classNames.split(/\s+/) console.log(arr) console.log(arr.splice(2, 1)); console.log(arr); //h5新添类名操作 console.log(div.classList); div.classList.add(['dd', 'ee']); //添加类名参数可为数组 div.classList.remove('aa'); console.log(div.classList); div.onclick = function () { div.classList.toggle('aa') } /*焦点管理*/ var inp = document.querySelector('input'); inp.focus(); console.log(document.activeElement);//页面获取焦点的元素 console.log(document.hasFocus(inp));//检测某个元素是否获取焦点 判断用户是否点击 /*自定义数据属性*/ console.log(inp.dataset.id); /*插入标记*/ div.innerHTML+='<script>alert(1)<\/script>'; h3.outerHTML='<h1>222</h1>'; console.log(li); console.log(ul.contains(li[0]));//ul是否包含li节点 </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.aa {
color: red;
}
</style>
<body>
<h3>我是标题</h3>
<ul>
<li class="a b">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="text" data-id="1">
<div class=" aa bb cc ">dasfasdasdsd</div>
<script>
/*
*
*
* */
var lis = document.querySelectorAll('li')
var ul = document.querySelector('ul');
var h3 = document.querySelector('h3');
var li = document.getElementsByClassName(' b a');
console.log(li)
console.log(h3);
console.log(lis);
/*元素遍历*/
console.log(ul.childElementCount);//返回子元素个数
console.log(ul.firstElementChild);//第一个子元素节点
console.log(ul.lastElementChild);//最后一个子元素节点
console.log(h3.previousElementSibling);//上一个元素节点
console.log(h3.nextElementSibling);//下一个元素节点
/*classList属性*/
var div = document.getElementsByClassName('cc aa bb').item(0);
console.log(div);
var classNames = div.className;
console.log(classNames)
var arr = classNames.split(/\s+/)
console.log(arr)
console.log(arr.splice(2, 1));
console.log(arr);
//h5新添类名操作
console.log(div.classList);
div.classList.add(['dd', 'ee']); //添加类名参数可为数组
div.classList.remove('aa');
console.log(div.classList);
div.onclick = function () {
div.classList.toggle('aa')
}
/*焦点管理*/
var inp = document.querySelector('input');
inp.focus();
console.log(document.activeElement);//页面获取焦点的元素
console.log(document.hasFocus(inp));//检测某个元素是否获取焦点 判断用户是否点击
/*自定义数据属性*/
console.log(inp.dataset.id);
/*插入标记*/
div.innerHTML+='<script>alert(1)<\/script>';
h3.outerHTML='<h1>222</h1>';
console.log(li);
console.log(ul.contains(li[0]));//ul是否包含li节点
</script>
</body>
</html>