51工具盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" class="box1">
<a href="#">html</a>
<a href="#">css</a>
<a href="#">javascript</a>
</div>
</body>
</html>
getElementById
通过id去获取元素
document.getElementById('box')
querySelector
可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素
// 使用id去选中
document.querySelector('#box')
// 使用class去选中
document.querySelector('.box1')
// 使用元素去选中
document.querySelector('div')
// 使用父子元素去选中的写法
document.querySelector('body div')
// 使用父子元素去选中div下的a元素时，querySelector只返回匹配的第一个元素
document.querySelector('.box1 a')
querySelectorAll
document.querySelectorAll()方法返回文档中与指定的CSS选择器或者标签等匹配的所有元素
// 获取页面中所有的 <a> 元素
document.querySelectorAll('a');
// 获取id为box元素下所有的 <a> 元素
let oAs = document.querySelectorAll('#box a');
console.log(oAs.length);
// 获取class为box1元素下所有的 <a> 元素
let oAs = document.querySelectorAll('.box1 a');
// 设置第二个a元素的字体颜色为白色
oAs[1].style.color = '#fff';
