javascript的选择器有哪些及怎么用
发布时间：2022-03-02 16:43:29
来源：亿速云
阅读：781
作者：iii
栏目：web开发
JavaScript的选择器有哪些及怎么用
在JavaScript中，选择器是用于从DOM（文档对象模型）中选取元素的重要工具。通过选择器，开发者可以精确地定位到页面中的某个或某些元素，进而对其进行操作。本文将介绍JavaScript中常用的选择器及其使用方法。
1. 基本选择器
1.1 getElementById
getElementById 是通过元素的 id 属性来选择元素的。由于 id 在页面中是唯一的，因此该方法返回的是单个元素。
let element = document.getElementById('myId');
1.2 getElementsByClassName
getElementsByClassName 是通过元素的 class 属性来选择元素的。由于 class 可以应用于多个元素，因此该方法返回的是一个 HTMLCollection（类数组对象）。
let elements = document.getElementsByClassName('myClass');
1.3 getElementsByTagName
getElementsByTagName 是通过元素的标签名来选择元素的。该方法返回的也是一个 HTMLCollection。
let elements = document.getElementsByTagName('div');
1.4 querySelector
querySelector 是通过CSS选择器来选择元素的。该方法返回的是第一个匹配的元素。
let element = document.querySelector('.myClass');
1.5 querySelectorAll
querySelectorAll 也是通过CSS选择器来选择元素的，但它返回的是所有匹配的元素，结果是一个 NodeList。
let elements = document.querySelectorAll('.myClass');
2. 层级选择器
2.1 后代选择器
后代选择器用于选择某个元素的后代元素。可以通过空格来表示层级关系。
let elements = document.querySelectorAll('div p');
2.2 子元素选择器
子元素选择器用于选择某个元素的直接子元素。可以通过 > 来表示直接子元素关系。
let elements = document.querySelectorAll('div > p');
2.3 相邻兄弟选择器
相邻兄弟选择器用于选择某个元素的下一个兄弟元素。可以通过 + 来表示相邻兄弟关系。
let element = document.querySelector('div + p');
2.4 通用兄弟选择器
通用兄弟选择器用于选择某个元素之后的所有兄弟元素。可以通过 ~ 来表示通用兄弟关系。
let elements = document.querySelectorAll('div ~ p');
3. 属性选择器
3.1 [attribute]
选择具有指定属性的元素。
let elements = document.querySelectorAll('[href]');
3.2 [attribute=value]
选择具有指定属性且属性值等于指定值的元素。
let elements = document.querySelectorAll('[href="https://example.com"]');
3.3 [attribute^=value]
选择具有指定属性且属性值以指定值开头的元素。
let elements = document.querySelectorAll('[href^="https"]');
3.4 [attribute$=value]
选择具有指定属性且属性值以指定值结尾的元素。
let elements = document.querySelectorAll('[href$=".com"]');
3.5 [attribute*=value]
选择具有指定属性且属性值包含指定值的元素。
let elements = document.querySelectorAll('[href*="example"]');
4. 伪类选择器
4.1 :first-child
选择某个元素的第一个子元素。
let element = document.querySelector('div:first-child');
4.2 :last-child
选择某个元素的最后一个子元素。
let element = document.querySelector('div:last-child');
4.3 :nth-child(n)
选择某个元素的第 n 个子元素。
let element = document.querySelector('div:nth-child(2)');
4.4 :nth-of-type(n)
选择某个元素的第 n 个指定类型的子元素。
let element = document.querySelector('div:nth-of-type(2)');
4.5 :not(selector)
选择不匹配指定选择器的元素。
let elements = document.querySelectorAll('div:not(.myClass)');
5. 伪元素选择器
5.1 ::before
在某个元素的内容之前插入内容。
let element = document.querySelector('div::before');
5.2 ::after
在某个元素的内容之后插入内容。
let element = document.querySelector('div::after');
6. 组合选择器
6.1 并集选择器
并集选择器用于选择多个选择器匹配的元素。可以通过逗号 , 来组合多个选择器。
let elements = document.querySelectorAll('div, p');
6.2 交集选择器
交集选择器用于选择同时匹配多个选择器的元素。可以通过连续书写多个选择器来表示交集关系。
let element = document.querySelector('div.myClass');
7. 总结
JavaScript提供了多种选择器来帮助开发者精确地定位和操作DOM元素。从基本的选择器到复杂的组合选择器，开发者可以根据实际需求选择合适的选择器来完成任务。掌握这些选择器的使用方法，将大大提高开发效率和代码的可维护性。