JavaScript CSS 选择器获取函数详细教程

JavaScript CSS 选择器获取函数详细教程

在 JavaScript 中，有多种方法可以通过 CSS 选择器来获取 DOM 元素。以下是几种常用方法的详细说明和示例。

1. querySelector

querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素。

语法

element = document.querySelector(selectors);

参数

• selectors: 一个字符串，包含一个或多个 CSS 选择器

返回值

• 匹配的第一个元素，如果没有匹配项则返回 null

示例

// 获取第一个 <div> 元素
const div = document.querySelector('div');

// 获取 class 为 "example" 的第一个元素
const example = document.querySelector('.example');

// 获取 id 为 "main" 的元素
const main = document.querySelector('#main');

// 组合选择器：获取 div 中 class 为 "content" 的第一个元素
const content = document.querySelector('div.content');

// 属性选择器：获取第一个有 disabled 属性的按钮
const disabledBtn = document.querySelector('button[disabled]');

2. querySelectorAll

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素的静态 NodeList。

语法

elementList = document.querySelectorAll(selectors);

参数

• selectors: 一个字符串，包含一个或多个 CSS 选择器

返回值

• 一个静态的 NodeList，包含所有匹配的元素

示例

// 获取所有 <p> 元素
const paragraphs = document.querySelectorAll('p');

// 获取所有 class 为 "note" 的元素
const notes = document.querySelectorAll('.note');

// 获取所有 div 中的 span 元素
const divSpans = document.querySelectorAll('div span');

// 使用 forEach 遍历结果
notes.forEach(note => {
  note.style.color = 'blue';
});

3. closest

closest() 方法从当前元素开始，沿 DOM 树向上查找与选择器匹配的最近祖先元素（包括元素自身）。

语法

element.closest(selectors);

参数

• selectors: 一个字符串，包含 CSS 选择器

返回值

• 匹配的最近祖先元素，如果没有则返回 null

示例

// 假设有以下 HTML 结构
// <div class="outer">
//   <div class="inner">
//     <span class="target">Click me</span>
//   </div>
// </div>

const target = document.querySelector('.target');

// 查找最近的 .inner 元素
const inner = target.closest('.inner'); // 返回 inner div

// 查找最近的 .outer 元素
const outer = target.closest('.outer'); // 返回 outer div

// 查找最近的 div 元素
const div = target.closest('div'); // 返回 inner div

// 查找不存在的祖先
const missing = target.closest('.not-exist'); // 返回 null

4. matches

matches() 方法检查元素是否匹配指定的 CSS 选择器。

语法

element.matches(selectors);

参数

• selectors: 一个字符串，包含 CSS 选择器

返回值

• 布尔值，表示元素是否匹配选择器

示例

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

if (element.matches('.active')) {
  console.log('元素有 active 类');
}

if (element.matches('div.warning')) {
  console.log('元素是 div 且有 warning 类');
}

5. getElementById

虽然不是 CSS 选择器方法，但 getElementById 是获取元素的常用方法。

语法

element = document.getElementById(id);

示例

const header = document.getElementById('header');

6. getElementsByClassName

获取所有具有指定类名的元素集合。

语法

elements = document.getElementsByClassName(names);

示例

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

7. getElementsByTagName

获取所有指定标签名的元素集合。

语法

elements = document.getElementsByTagName(name);

示例

const paragraphs = document.getElementsByTagName('p');

选择器性能比较

一般来说，性能从高到低排序：

1. getElementById
2. getElementsByClassName
3. getElementsByTagName
4. querySelector
5. querySelectorAll

实际应用示例

// 获取表单中所有必填字段
const requiredFields = document.querySelectorAll('input[required]');

// 检查点击的元素是否是按钮
document.addEventListener('click', function(event) {
  if (event.target.matches('button')) {
    console.log('按钮被点击');
  }
});

// 找到包含特定文本的列表项
const items = document.querySelectorAll('li');
items.forEach(item => {
  if (item.textContent.includes('重要')) {
    item.classList.add('important');
  }
});

// 从子元素找到最近的父容器
const child = document.querySelector('.child-element');
const container = child.closest('.container');

注意事项

1. querySelectorAll 返回的是静态 NodeList，不是实时的
2. getElementsByClassName 和 getElementsByTagName 返回的是实时的 HTMLCollection
3. 复杂的选择器可能会影响性能
4. 在大型文档中，尽量使用具体的选择器以提高性能

希望这个教程能帮助你更好地理解和使用 JavaScript 中的 CSS 选择器获取方法！