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