abstrak：<!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'); //根據(jù)標(biāo)簽選擇器:li 來獲取
console.log(li);
li[2].style.backgroundColor="green";
li.item(4).style.backgroundColor="coral";
//該方法也可以在元素上調(diào)用
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() 返回符合條件的所有元素
返回的是一個節(jié)點列表數(shù)組，NodeList
元素的集合其實是一個對象，它的上面有一個方法：item()
Guru membetulkan：滅絕師太Masa pembetulan：2018-12-29 09:46:26
Rumusan guru：完成的不錯，選擇頁面元素最簡單的方式有很多種，看你自己喜歡使用哪一種，都是知識點，要好好掌握！