摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<!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選擇器來(lái)獲取元素</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()獲取符合條件的第一個(gè)元素
document.querySelector('.red').style.color = "red";
//querySelectorAll()獲取符合條件元素?cái)?shù)組，item()獲取具體元素
document.querySelectorAll('li').item(1).style.color = "lightblue";
//也可以用索引下標(biāo)獲取具體元素
document.querySelectorAll('.blue')[0].style.color = "green";
//該方法還可以在元素上調(diào)用
document.querySelector('ul').querySelectorAll('li')[4].style.background = "red";
//for循環(huán)遍歷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>
批改老師：韋小寶批改時(shí)間：2019-03-01 16:26:28
老師總結(jié)：寫的很不錯(cuò) 課后沒(méi)事的時(shí)候要記得多去練習(xí)練習(xí)