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元素。从基本的选择器到复杂的组合选择器，开发者可以根据实际需求选择合适的选择器来完成任务。掌握这些选择器的使用方法，将大大提高开发效率和代码的可维护性。