【JavaScript】选择器

JavaScript选择DOM元素的方法

• getElementById：根据指定元素的id属性返回元素
• getElementByClassName：返回所有指定类名的元素
• getElementsByName：返回所有指定name属性的元素
• getElementsByTagName：返回所有指定标签的元素
• querySelector：根据选择器规则返回第一个符合要求的元素
• querySelectorAll：根据选择器规则返回所有符合要求的元素

1. ID选择器

通过HTML元素的id属性选取指定的元素

document.getElementById("id_name");
document.querySelector("#id_name");

2. class选择器

通过指定的 class 查找元素

document.getElementByClassName("class_name");
document.querySelectorAll(".class_name");

3. 元素选择器

基于元素名选取元素，如果有多个，需要用到遍历，直接写元素名

document.getElementsByTagName("a");//获取所有的<a>元素
document.querySelectorAll("a");

4. 属性选择器

通过属性选取元素，可用于自定义属性，需要写 [] 号，包含属性名

document.querySelectorAll("select[name='Type']");//选取所有name属性为Type的<select>元素
document.querySelectorAll("div[data-type]");//获取所有带自定义属性data-type的<div>元素
document.querySelectorAll("div[data-type="+type+"]");//获取所有自定义属性data-type为变量type的<div>元素

5. 分组选择器

以 , 号隔开，同时获取多个类型的元素

document.querySelectorAll("div,a");//获取所有<div>和<a>元素
document.querySelectorAll(".btn,.text")//获取class为"btn"或"text"的所有元素

6. 后代选择器

以空格分隔，从父类元素从左往右写

document.querySelectorAll("div a");//<div>元素的后代的所有<a>元素
document.querySelectorAll(".type_ul input[type='checkbox']:checked")//获取class为type_ul的子元素<input>中type为checkbox且被选中的元素

7. 子元素选择器

后代选择器会将元素底下的所有相关元素都搜索出来，如果想进一步缩小范围，可以使用子元素选择器，只会选择某个元素的一级子元素，子元素用 > 号表示

document.querySelectorAll("#cusTable>tbody>tr");//id为cusTable的元素的所有<tbody>元素的直接子元素的所有<tr>元素

8. 兄弟选择器

选择紧接在一个元素后的另一个元素，两者有相同的父元素，用 + 号表示

document.querySelectorAll("div+p");//每个<div>元素相邻的下一个<p>元素

9. 伪类选择器

jQuery	实例	说明
:first	$(“p:first”)	第一个<p>元素
:last	$(“p:last”)	最后一个<p>元素
:first-child	$(“p:first-child”)	属于其父元素的第一个子元素的所有<p>元素
:last-child	$(“p:last-child”)	属于其父元素的最后一个子元素的所有<p>元素
:nth-child(n)	$(“p:nth-child(2)”)	属于其父元素的第二个子元素的所有<p>元素
:even	$(“tr:even”)	所有偶数位置的<tr>元素
:odd	$(“tr:odd”)	所有奇数位置的 <tr> 元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 值从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列举 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列举 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的输入元素
:empty	$(":empty")	所有空元素