DOM选择器

DOM选择器用于在页面中查找和获取元素，是操作DOM的第一步。

getElementById

通过ID获取单个元素：

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

注意：ID在页面中应唯一，没有匹配返回 null。

getElementsByTagName

通过标签名获取HTMLCollection：

const list = document.getElementsByTagName('li');
console.log(list.length);  // 实时更新

getElementsByClassName

通过类名获取HTMLCollection：

const items = document.getElementsByClassName('item');

querySelector / querySelectorAll

使用CSS选择器查询元素：

querySelector

获取第一个匹配元素：

const element = document.querySelector('.item');
const first = document.querySelector('ul li:first-child');

querySelectorAll

获取所有匹配元素（NodeList）：

const items = document.querySelectorAll('.item');
items.forEach(item => console.log(item));

选择器对比

注意：querySelectorAll 返回的是静态NodeList，不实时更新。

特殊选择器

获取html和body

const html = document.documentElement;
const body = document.body;

获取表单元素

const form = document.forms[0];
const input = form.elements['username'];

获取所有元素

const all = document.querySelectorAll('*');

选择器组合

// 后代选择器
document.querySelectorAll('ul li');

// 子选择器
document.querySelectorAll('ul > li');

// 属性选择器
document.querySelectorAll('[data-id]');
document.querySelectorAll('input[type="text"]');

// 伪类选择器
document.querySelectorAll('li:first-child');
document.querySelectorAll('li:nth-child(2)');

上下文查询

在特定元素内查询：

const container = document.getElementById('container');
const items = container.querySelectorAll('.item');
const first = container.querySelector('.item');

实时性与静态

// HTMLCollection 实时更新
const live = document.getElementsByClassName('item');
console.log(live.length);  // 3
document.body.appendChild(document.createElement('div')).className = 'item';
console.log(live.length);  // 4（实时更新）

// NodeList 静态快照
const static = document.querySelectorAll('.item');
console.log(static.length);  // 3
document.body.appendChild(document.createElement('div')).className = 'item';
console.log(static.length);  // 3（不会更新）

要点总结

1. 单ID查询用 getElementById，性能最好
2. 复杂选择器用 querySelector/querySelectorAll
3. querySelectorAll 返回静态快照，不实时更新
4. 多元素批量操作推荐 querySelectorAll
5. 在已知父元素内查询可缩小范围提升性能