js selector

// 示例代码：使用 JavaScript 选择器

// 1. 使用 document.querySelector() 选择第一个匹配的元素
const firstElement = document.querySelector('div'); // 选择页面中第一个 <div> 元素
console.log(firstElement);

// 2. 使用 document.querySelectorAll() 选择所有匹配的元素
const allElements = document.querySelectorAll('p'); // 选择页面中所有的 <p> 元素
allElements.forEach(element => {
    console.log(element);
});

// 3. 使用类选择器
const elementByClass = document.querySelector('.my-class'); // 选择第一个具有 class="my-class" 的元素
console.log(elementByClass);

// 4. 使用 ID 选择器
const elementById = document.querySelector('#my-id'); // 选择具有 id="my-id" 的元素
console.log(elementById);

// 5. 使用标签和类组合选择器
const specificElement = document.querySelector('div.my-class'); // 选择第一个 <div> 元素且其 class="my-class"
console.log(specificElement);

解释说明：

• document.querySelector(selector)：返回文档中与指定的选择器或选择器组匹配的第一个 Element 节点。如果没有匹配的节点，则返回 null。
• document.querySelectorAll(selectors)：返回一个静态（非活动）的 NodeList，包含文档中与指定选择器或选择器组匹配的所有元素。如果没有任何元素匹配，则返回空的 NodeList。

通过这些方法，你可以轻松地在网页中选择特定的 HTML 元素并对其进行操作。