使用css选择器来获取元素
<!DOCTYPE html>
<html>
<head>
<title>使用css选择器来获取元素</title>
</head>
<body>
<ul id="ul">
<li class="red">选项01</li>
<li>选项02</li>
<li class="green">选项03</li>
<li class="green">选项04</li>
<li class="coral large">选项05</li>
</ul>
</body>
</html>
<script type="text/javascript">
// 选择页面元素最简单的方式就是用css选择器: .red --> class="red"
let lists = document.querySelectorAll('li'); // 根据标签选择器:li 来获取
console.log(lists); // 返回一个节点数组 可以用键值选择[1] .item(1)
lists[0].style.background = 'coral';
lists.item(1).style.background = 'blue';
// 该方法也可以子元素上调用
let ul = document.querySelector('#ul'); // 返回满足条件的第一个 返回元素
console.log(ul);
// 等效语句
// let ul1 = document.querySelectorAll('#ul')[0];
// console.log(ul1);
let li = ul.querySelectorAll('.green'); // 返回节点数组
console.log(li);
for(let i=0;i<li.length;i++){
li[i].style.background = 'green';
}
</script>
