摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css选择器来获取元素</title> </head> <body> <ul id="ul">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css选择器来获取元素</title>
</head>
<body>
<ul id="ul">
<li class="red">列表1</li>
<li class="red">列表2</li>
<li class="green">列表3</li>
<li class="red">列表4</li>
<li class="coral large">列表5</li>
</ul>
<script type="text/javascript">
//选择页面元素最简单的方式就是用css选择器: .red-->class="red"
let li = document.querySelectorAll('li'); //根据标签选择器:li 来获取
console.log(li);
li[2].style.backgroundColor="green";
li.item(4).style.backgroundColor="coral";
//该方法也可以在元素上调用
let ul = document.querySelector('#ul'); //返回满足条件的第一个
//等效语句 document.querySelectorAll('#ul')[0];
console.log(ul);
let red = document.querySelectorAll('.red');
console.log(red);
for(let i=0;i<red.length;i++){
red[i].style.backgroundColor="red";
}
</script>
</body>
</html>css选择器:querySelector() 返回符合条件的第一个元素
querySelectorAll() 返回符合条件的所有元素
返回的是一个节点列表数组，NodeList
元素的集合其实是一个对象，它的上面有一个方法：item()
批改老师：灭绝师太批改时间：2018-12-29 09:46:26
老师总结：完成的不错，选择页面元素最简单的方式有很多种，看你自己喜欢使用哪一种，都是知识点，要好好掌握！
