编辑“︁JavaScript DOM选择器”︁（章节）

= JavaScript DOM选择器 =

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

== 概述 ==
DOM选择器允许开发者通过多种方式访问HTML元素：
* 通过'''ID'''选取唯一元素
* 通过'''类名'''选取一组元素
* 通过'''标签名'''选取特定类型的元素
* 使用'''CSS选择器语法'''进行复杂查询

== 基本选择方法 ==

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

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

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

=== getElementsByClassName() ===
通过class属性获取元素集合（HTMLCollection）：

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

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

=== getElementsByTagName() ===
通过标签名获取元素集合：

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

== 现代选择器API ==

=== querySelector() ===
使用CSS选择器语法获取'''第一个'''匹配元素：

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

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

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

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

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

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

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

<syntaxhighlight lang="javascript">
// 选择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)');
</syntaxhighlight>

== 实际应用案例 ==
'''案例：动态表格过滤'''

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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

== 选择器特殊场景处理 ==

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

<syntaxhighlight lang="javascript">
const container = document.getElementById('container');
// 只在container元素内查找
const innerDiv = container.querySelector('.inner-div');
</syntaxhighlight>

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

<syntaxhighlight lang="javascript">
const staticList = document.querySelectorAll('.item');
console.log(staticList.length); // 假设输出: 2

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

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

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

== 数学表示 ==
选择器匹配可以表示为集合操作。设文档为<math>D</math>，选择器为<math>S</math>，则匹配结果：

<math>
M = \{ e \in D \mid e \text{ 匹配 } S \}
</math>

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

== 总结 ==
JavaScript DOM选择器提供了灵活多样的元素选取方式：
* 传统方法（getElementById等）简单高效
* 现代querySelector API功能强大
* 理解不同选择器的特性和性能差异很重要
* 合理使用选择器可以大幅提升代码效率和可维护性

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

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript DOM]]