版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36205380/article/details/84248682
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") | 所有空元素 |