使用css选择器来获取元素
清玉2019-03-01 15:35:47278<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用css选择器来获取元素</title>
</head>
<body>
<ul id="ul">
<li>列表01</li>
<li>列表02</li>
<li>列表03</li>
<li class="red green">列表04</li>
<li>列表05</li>
<hr>
<li>列表01</li>
<li>列表02</li>
<li>列表03</li>
<li>列表04</li>
<li>列表05</li>
</ul>
<script>
//querySelector()获取符合条件的第一个元素
document.querySelector('.red').style.color = "red";
//querySelectorAll()获取符合条件元素数组，item()获取具体元素
document.querySelectorAll('li').item(1).style.color = "lightblue";
//也可以用索引下标获取具体元素
document.querySelectorAll('.blue')[0].style.color = "green";
//该方法还可以在元素上调用
document.querySelector('ul').querySelectorAll('li')[4].style.background = "red";
//for循环遍历class为li的元素背景色为pink
var len = document.querySelectorAll('.li').length;
for (var i = 0; i < len; i++) {
document.querySelectorAll('.li')[i].style.background = "pink";
}
</script>
</body>
</html>