js选择器

在 JavaScript 中，选择器主要用于选取 DOM 元素，以便对其进行操作，如修改样式、添加事件监听器等。以下是一些常用的 JavaScript 选择器：

1. getElementById

用于根据元素的 id 属性值获取单个元素。返回值是一个元素对象，如果没有找到匹配的元素，则返回 null。

const element = document.getElementById('myId');

2. getElementsByClassName

根据元素的 class 属性值获取一组元素。返回值是一个 HTMLCollection 对象，它是一个类数组对象，包含所有匹配的元素。

const elements = document.getElementsByClassName('myClass');

3. getElementsByTagName

根据元素的标签名获取一组元素。返回值也是一个 HTMLCollection 对象。

const elements = document.getElementsByTagName('div');

4. querySelector

使用 CSS 选择器来选取文档中的元素。返回值是匹配选择器的第一个元素，如果没有找到匹配的元素，则返回 null。

const element = document.querySelector('#myId');
const element = document.querySelector('.myClass');
const element = document.querySelector('div');

5. querySelectorAll

同样使用 CSS 选择器来选取文档中的元素，但返回值是一个 NodeList 对象，包含所有匹配的元素。

const elements = document.querySelectorAll('#myId');
const elements = document.querySelectorAll('.myClass');
const elements = document.querySelectorAll('div');

6. closest

用于查找当前元素或其父元素中匹配指定选择器的第一个元素。这个方法是从下往上查找，直到找到匹配的元素或到达文档根节点为止。

const element = document.querySelector('.child');
const closestElement = element.closest('.parent');

7. matches

用于判断当前元素是否匹配指定的选择器。如果匹配，则返回 true，否则返回 false。

const element = document.querySelector('.myClass');
const isMatch = element.matches('.myClass');

示例

假设有一个 HTML 结构如下：

<div id="main" class="container">
    <h1 class="title">Hello World</h1>
    <p class="description">This is a paragraph.</p>
</div>

可以使用以下 JavaScript 代码来选择元素：

// 通过 id 选择元素
const mainDiv = document.getElementById('main');
// 通过 class 选择元素
const title = document.querySelector('.title');
// 选择所有 class 为 description 的元素
const descriptions = document.querySelectorAll('.description');
// 选择 mainDiv 下的第一个 h1 元素
const h1 = mainDiv.querySelector('h1');

这些选择器提供了强大的功能，可以帮助你精确地选取页面中的元素，从而进行各种操作。