JS选择器介绍
<!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：根据指定元素的id属性返回元素
2.getElementsByName：返回所有指定name属性的元素
3.getElementsByTagName：返回所有指定标签的元素
4.querySelector：根据选择器规则返回第一个符合要求的元素
5.querySelectorAll：根据选择器规则返回所有符合要求的元素 -->
<!-- 选择器的分类 -->
<!-- 1. ID选择器
使用ID选择器时，需在前面添加“#”，区分大小写，语法如下： -->
<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. 后代选择器
主要用于选择作为某元素后代的元素，规则左边的选择器一端包含两个或多个用空格分隔的选择器，如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>