JavaScript DOM选择器

JavaScript DOM选择器

DOM（Document Object Model）选择器是JavaScript中用于定位和操作HTML文档元素的核心工具。通过DOM选择器，开发者可以精确地选取页面中的特定元素，进而修改其内容、样式或行为。本章节将详细介绍JavaScript中常用的DOM选择方法，包括传统方法和现代选择器API。

概述

DOM选择器允许开发者通过多种方式访问HTML元素：

• 通过ID选取唯一元素
• 通过类名选取一组元素
• 通过标签名选取特定类型的元素
• 使用CSS选择器语法进行复杂查询

基本选择方法

getElementById()

最传统的选择方法，通过元素的id属性获取单个元素：

// HTML: <div id="header">Welcome</div>
const header = document.getElementById('header');
console.log(header.textContent); // 输出: "Welcome"

特点：

• 返回单个元素（因为id在文档中应是唯一的）
• 如果找不到元素则返回null
• 性能最佳的选择方法

getElementsByClassName()

通过class属性获取元素集合（HTMLCollection）：

// HTML: <p class="note">Note 1</p><p class="note">Note 2</p>
const notes = document.getElementsByClassName('note');
console.log(notes.length); // 输出: 2

注意：

• 返回的是动态集合（文档变化时会自动更新）
• 即使只有一个匹配元素也返回集合

getElementsByTagName()

通过标签名获取元素集合：

// HTML: <ul><li>Item 1</li><li>Item 2</li></ul>
const items = document.getElementsByTagName('li');
console.log(items[0].textContent); // 输出: "Item 1"

现代选择器API

querySelector()

使用CSS选择器语法获取第一个匹配元素：

// HTML: <div class="box">Box 1</div><div class="box">Box 2</div>
const firstBox = document.querySelector('.box');
console.log(firstBox.textContent); // 输出: "Box 1"

querySelectorAll()

获取所有匹配CSS选择器的元素（返回静态的NodeList）：

const allBoxes = document.querySelectorAll('.box');
allBoxes.forEach(box => {
    console.log(box.textContent); 
});
// 输出: 
// "Box 1"
// "Box 2"

优势：

• 支持所有CSS选择器语法
• 返回的NodeList可以使用forEach等数组方法
• 静态集合（不会随DOM变化自动更新）

选择器性能比较

不同选择器的性能差异（从最快到最慢）： 1. getElementById() 2. getElementsByClassName() 3. getElementsByTagName() 4. querySelector() 5. querySelectorAll()

pie title 选择器性能比较 "getElementById()" : 35 "getElementsByClassName()" : 25 "getElementsByTagName()" : 20 "querySelector()" : 15 "querySelectorAll()" : 5

复杂选择器示例

现代CSS选择器语法支持复杂查询：

// 选择data-active属性为true的第一个div
const activeDiv = document.querySelector('div[data-active="true"]');

// 选择ul中最后一个li
const lastItem = document.querySelector('ul li:last-child');

// 选择类名包含"btn"但不是"btn-disabled"的按钮
const enabledButtons = document.querySelectorAll('.btn:not(.btn-disabled)');

实际应用案例

案例：动态表格过滤

<input type="text" id="search" placeholder="搜索...">
<table id="data-table">
    <tr><td>Apple</td></tr>
    <tr><td>Orange</td></tr>
    <tr><td>Banana</td></tr>
</table>

<script>
document.getElementById('search').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const rows = document.querySelectorAll('#data-table tr');
    
    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchTerm) ? '' : 'none';
    });
});
</script>

工作原理： 1. 监听搜索框的输入事件 2. 获取表格中所有行（使用querySelectorAll） 3. 根据搜索条件显示/隐藏行

选择器特殊场景处理

选择器作用域

可以在特定元素上调用选择方法，限制搜索范围：

const container = document.getElementById('container');
// 只在container元素内查找
const innerDiv = container.querySelector('.inner-div');

动态添加元素

使用querySelectorAll获取的静态集合不会自动包含新添加的元素：

const staticList = document.querySelectorAll('.item');
console.log(staticList.length); // 假设输出: 2

// 动态添加新元素
document.body.innerHTML += '<div class="item">New</div>';

console.log(staticList.length); // 仍然输出: 2

选择器最佳实践

1. 缓存选择结果：避免重复查询相同元素 2. 使用最具体的选择器：提高性能 3. 优先使用ID选择器：当需要唯一元素时 4. 注意选择器复杂度：过于复杂的选择器影响性能

数学表示

选择器匹配可以表示为集合操作。设文档为$D$，选择器为$S$，则匹配结果：

$M=\{e\in D\mid e\text{ 匹配 }S\}$

对于querySelector()，返回$M$中的第一个元素；对于querySelectorAll()，返回整个集合$M$。

总结

JavaScript DOM选择器提供了灵活多样的元素选取方式：

• 传统方法（getElementById等）简单高效
• 现代querySelector API功能强大
• 理解不同选择器的特性和性能差异很重要
• 合理使用选择器可以大幅提升代码效率和可维护性

通过掌握这些选择器技术，开发者可以更高效地操作网页内容，创建动态交互体验。