通过css选择器来获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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>
<script>
//querySelectorAll() 返回数组
let lists=document.querySelectorAll('li');
console.log(lists);
lists[0].style.background='red';
//querySelector 返回一个
let ul=document.querySelector('#ul');
console.log(ul);
//ul.style.background='green';
let li=ul.querySelectorAll('.green');
console.log(li);
for(let i=0;i<li.length;i++){
li[i].style.background='lavender';
}
</script>
</body>
</html>
<!-- 总结
querySelectorAll() 返回的是数组
queryslector() 返回满足条件的第一个 -->