<!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>