abstrait：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<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>JS選擇器介紹</title>
</head>
<body>
<!-- JS選擇器介紹
在HTML5 JS查找DOM元素，有以下五種原生的方法：
1.getElementById：根據(jù)指定元素的id屬性返回元素
2.getElementsByName：返回所有指定name屬性的元素
3.getElementsByTagName：返回所有指定標簽的元素
4.querySelector：根據(jù)選擇器規(guī)則返回第一個符合要求的元素
5.querySelectorAll：根據(jù)選擇器規(guī)則返回所有符合要求的元素 -->
<!-- 選擇器的分類 -->
<!-- 1. ID選擇器
使用ID選擇器時，需在前面添加“#”，區(qū)分大小寫，語法如下： -->
<ul>
<li id="one">1,ID選擇器1</li>
</ul>
<script>
var li = document.querySelector('#one'); //等同于document.getElementById('id');
console.log(li);
li.style.backgroundColor = 'red';
</script>
<hr>
<!-- 2. 元素選擇器
元素選擇器通過指定的標簽查詢元素，此時querySelectorAll等同于getElementsByTagName，語法如下： -->
<div>
<a href="">2. 元素選擇器 1</a>
<a href="">2. 元素選擇器 2</a>
<a href="">2. 元素選擇器 3</a>
<a href="">2. 元素選擇器 4</a>
</div>
<script>
let a = document.querySelectorAll('a'); //獲取頁面上的所有a元素并返回元素
console.log(a);
for (var i = 0;i<a.length;i++){
a[i].style.backgroundColor = 'coral';
};
</script>
<hr>
<!-- 3. 樣式類選擇器
使用元素的樣式類獲取一個或一類元素，樣式名字前使用“.”（英文句號）開頭，語法如下： -->
<ul>
<li class="btn">3,樣式類選擇器1</li>
<li class="btng">3,樣式類選擇器2</li>
<li class="btn">3,樣式類選擇器3</li>
<li class="btng">3,樣式類選擇器4</li>
<li class="btn">3,樣式類選擇器5</li>
</ul>
<script>
let one = document.querySelectorAll('.btn'); //獲取所有樣式類中包含btn類名的元素
console.log(one);
for (var i = 0;i<one.length;i++){
one[i].style.backgroundColor = 'green';
};
</script>
<hr>
<!-- 4. 分組選擇器
使用querySelectorAll不僅可以獲取一個或一類元素，還可以同時獲取其他類別元素，兩種類型之間使用逗號隔開，語法如下： -->
<div>
<a href="">標簽元素1</a>
<a href="">標簽元素2</a>
<p>標簽元素1</p>
<p>標簽元素2</p>
<ul>
<li class="bto">4. 分組選擇器1</li>
<li >4. 分組選擇器2</li>
<li class="bto">4. 分組選擇器3</li>
</ul>
<div>
<span class="txt"> 樣式類名的元素 </span>
<span > 樣式類名的元素 </span>
</div>
</div>
<script>
let ap = document.querySelectorAll('a,p'); //獲取頁面上所有a元素和p元素，并通過一個列表返回
let two = document.querySelectorAll('.bto,.txt'); //獲取頁面上所有包含btn和txt樣式類名的元素
console.log(ap);
</script>
<hr>
<!-- 5. 屬性選擇器
獲取頁面上包含指定屬性的元素，屬性名稱可以是元素原生屬性和用戶自定義屬性，語法如下： -->
<div>
<a href="" target="_blank">屬性選擇器</a>
<a href="">屬性選擇器</a>
<a href="">屬性選擇器</a>
<img src="" alt="" data-id="">
</div>
<script>
let blank = document.querySelectorAll('a[target="_blank"]'); //獲取頁面上所有target屬性為_blank的a元素
let data = document.querySelectorAll('img[data-id]'); //獲取頁面上所有帶有自定義屬性data-id的img元素
console.log(data);
</script>
<hr>
<!-- 6. 后代選擇器
主要用于選擇作為某元素后代的元素，規(guī)則左邊的選擇器一端包含兩個或多個用空格分隔的選擇器，如div a可以理解為查找所有被div包圍的所有a元素，語法如下： -->
<div>
<a href=""></a>
<a href=""></a>
<ul>
<li class="btt">1</li>
<li class="btt">2</li>
<li class="btt">3</li>
<li class="btt">4</li>
</ul>
</div>
<script>
let ad = document.querySelectorAll('div a'); //獲取頁面上所有被div包含的a元素
let bd = document.querySelectorAll('div .btt'); //獲取頁面上所有被div包含的帶有btn樣式類名的元素
console.log(bd);
</script>
<hr>
<!-- 7. 子元素選擇器
后代選擇器會將元素底下的所有相關元素都搜索出來，如果想進一步縮小范圍，可以使用子元素選擇器，只會選擇某個元素的一級子元素，子元素用“>”（大于號）表示，代碼如下： -->
<html>
<div id="first">
1
<div>子元素選擇器</div>
<div>子元素選擇器</div>
</div>
</html>
<script>
let hd = document.querySelectorAll('html>div'); //只返回一個id為first的div元素
hd.style.backgroundColor = 'red';
</script>
<hr>
<!-- 8. 相鄰兄弟選擇器（比較少用）
選擇緊接在另一個元素后的元素，而且兩者有相同的父元素，相鄰兄弟選擇器使用“+”（加號），代碼如下： -->
<div>
<div></div>
<div></div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<script>
let dp = document.querySelectorAll('div+p'); //只返回一個id為p1的p元素
console.log(dp);
</script>
<hr>
<!-- 9. 偽類選擇器
“:first-child”表示選擇元素的第一個子元素，“:last-child”表示選擇元素的最后一個子元素，“:nth-child(n)”表示選擇元素的第n個子元素。“:first-child”的使用例子，代碼如下： -->
<div>
<p id="p1"></p>
<p id="p2"></p>
</div>
<script>
let pc = document.querySelectorAll('p:first-child'); //只返回一個id為p1的p元素
console.log(pc);
</script>
<!-- 除了上述九種常用的選擇方法外，還有很多其他更高級的選擇器使用方法。 -->
</body>
</html>
Professeur correcteur：查無此人Temps de correction：2019-04-23 13:38:33
Résumé du professeur：完成的不錯，會了js操作，才算前端工程師。繼續(xù)加油。