摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>使用css选择器来获取元素</title></head><body><ul id="ul"><li class="one&q
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用css选择器来获取元素</title>
</head>
<body>
<ul id="ul">
<li class="one">列表01</li>
<li>列表02</li>
<li class="two">列表03</li>
<li class="three red">列表04</li>
<li class="two">列表05</li>
</ul>
<script>
var lists = document.querySelectorAll('li');//根据标签选择器:li来获取
console.log(lists);
lists[0].style.background = 'red';
lists.item(2).style.background = 'green';
//改方法也可以在元素上调用
var ul = document.querySelector('#ul');//返回满足条件的第一个
console.log(ul);
var lis = ul.querySelectorAll('.two');
console.log(lis);
for(var i=0;i<lis.length;i++){
lis[i].style.background = 'blue';
}
</script>
</body>
</html>
