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