????：<!DOCTYPE html> <html> <head> <title>使用css選擇器來(lái)獲取元素</title> </head> <body> <ul id="ul"> <li class="red">選項(xiàng)01&l
<!DOCTYPE html>
<html>
<head>
<title>使用css選擇器來(lái)獲取元素</title>
</head>
<body>
<ul id="ul">
<li class="red">選項(xiàng)01</li>
<li>選項(xiàng)02</li>
<li class="green">選項(xiàng)03</li>
<li class="green">選項(xiàng)04</li>
<li class="coral large">選項(xiàng)05</li>
</ul>
</body>
</html>
<script type="text/javascript">
// 選擇頁(yè)面元素最簡(jiǎn)單的方式就是用css選擇器: .red --> class="red"
let lists = document.querySelectorAll('li'); // 根據(jù)標(biāo)簽選擇器:li 來(lái)獲取
console.log(lists); // 返回一個(gè)節(jié)點(diǎn)數(shù)組 可以用鍵值選擇[1] .item(1)
lists[0].style.background = 'coral';
lists.item(1).style.background = 'blue';
// 該方法也可以子元素上調(diào)用
let ul = document.querySelector('#ul'); // 返回滿足條件的第一個(gè) 返回元素
console.log(ul);
// 等效語(yǔ)句
// let ul1 = document.querySelectorAll('#ul')[0];
// console.log(ul1);
let li = ul.querySelectorAll('.green'); // 返回節(jié)點(diǎn)數(shù)組
console.log(li);
for(let i=0;i<li.length;i++){
li[i].style.background = 'green';
}
</script>
?? ???：天蓬老師?? ??：2019-03-02 15:42:20
???? ??：class是樣式中, 用得最多的一個(gè)屬性, 它的用途遠(yuǎn)比id要大得多, 能用class, 就盡可能不用id