dom通过css选择器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过css选择器获取元素</title>
</head>
<body>
<ul id="ul">
<li>列表项1</li>
<li class="">列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li class=" coral large">列表项5</li>
</ul>
<script type="text/javascript">
let lists =document.querySelectorAll('li');//返回满足条件的所有
console.log(lists);
lists[0].style.backgroundColor = 'coral';
lists.item(1).style.backgroundColor ='lightgreen';
let ul = document.querySelector('#ul');//返回满足条件的第一个
console.log(ul);
let li =ul.querySelectorAll('.green');
console.log(li);
for(let i =0;i<li.length;i++){
li[i].style.backgroundColor = 'green';
}
</script>
</body>
</html>document.querySelectorAll()返回所有，document.querySelector()返回第一一个