JS：DOM元素获取方法

一、按 ID 获取

`getElementById()`

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

返回匹配指定 ID 的单个元素
如果找不到返回 null
性能最优的查找方式

二、按类名获取

`getElementsByClassName()`

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

返回包含所有指定类名的动态 HTMLCollection
可以在特定元素上调用：element.getElementsByClassName()

三、按标签名获取

`getElementsByTagName()`

const divs = document.getElementsByTagName('div');

返回所有指定标签的动态 HTMLCollection
支持通配符 '*' 获取所有元素

四、按 CSS 选择器获取

`querySelector()`

const element = document.querySelector('.container > p.active');

返回第一个匹配 CSS 选择器的元素
找不到返回 null

`querySelectorAll()`

const elements = document.querySelectorAll('div.note');

返回所有匹配元素的静态 NodeList
支持复杂 CSS 选择器

五、按 name 属性获取

`getElementsByName()`

const inputs = document.getElementsByName('username');

主要用于表单元素
返回动态 NodeList

六、特殊集合

文档级快捷访问

document.head      // <head> 元素
document.body      // <body> 元素
document.forms     // 所有 <form> 元素
document.images    // 所有 <img> 元素
document.links     // 所有 <a> 和 <area> 元素
document.scripts   // 所有 <script> 元素

七、DOM 遍历属性

节点关系

element.parentElement      // 父元素
element.children          // 子元素集合 (HTMLCollection)
element.firstElementChild // 第一个子元素
element.lastElementChild  // 最后一个子元素
element.nextElementSibling // 下一个兄弟元素
element.previousElementSibling // 上一个兄弟元素

节点信息

element.tagName       // 标签名 (大写)
element.id            // ID 属性
element.className     // class 属性
element.classList     // class 列表 (DOMTokenList)

八、动态 vs 静态集合

方法/属性	返回类型	是否动态更新
`getElementsBy*`	HTMLCollection	✅
`querySelectorAll`	NodeList	❌
`childNodes`	NodeList	✅
`children`	HTMLCollection	✅

最佳实践建议

优先使用 getElementById - 性能最佳
需要复杂选择时用 querySelector/All - 更灵活
注意动态集合的性能影响 - 频繁访问可能导致重排
现代项目推荐使用 querySelector - 更统一的 API

示例组合使用

// 获取表单中所有必填输入框
const requiredInputs = document.querySelectorAll('form#userForm input[required]');

// 获取表格中奇数行
const oddRows = document.querySelectorAll('table.striped tr:nth-child(odd)');