HTML前端开发：JavaScript 获取元素方法详解

作为前端开发者，高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法，分为两大系列：

一、getElementBy... 系列

传统方法，直接通过 DOM 接口访问，返回动态集合（元素变化会实时更新）。

方法	语法	返回类型	特点	示例
getElementById()	document.getElementById('id')	单个元素	ID 必须唯一，性能最优	const header = document.getElementById('header')
getElementsByClassName()	document.getElementsByClassName('class')	HTMLCollection (类数组)	通过 class 获取，返回集合	const items = document.getElementsByClassName('item')[0]
getElementsByTagName()	document.getElementsByTagName('div')	HTMLCollection (类数组)	通过标签名获取	const divs = document.getElementsByTagName('div')
getElementsByName()	document.getElementsByName('username')	NodeList (类数组)	通过 name 属性获取（常用于表单）	const inputs = document.getElementsByName('email')

⚠️ 注意事项：

1. 类数组需用索引访问单个元素：elements[0]

2. 动态集合：删除/新增元素会影响结果

3. ID 方法最快速，优先使用

二、querySelector 系列

现代方法，支持 CSS 选择器，返回静态集合（创建时的元素快照）。

方法	语法	返回类型	特点	示例
querySelector()	document.querySelector('selector')	单个元素	返回匹配的第一个元素	const btn = document.querySelector('.btn-primary')
querySelectorAll()	document.querySelectorAll('selector')	NodeList (静态集合)	返回所有匹配元素	const cards = document.querySelectorAll('.card')

✅ 优势：

1. 支持复杂选择器（如：div > .active[data-id="1"]）

2. 静态集合不受 DOM 变化影响

3. 链式调用：element.querySelector()

三、获取元素后的内容操作

获取元素后常用属性操作内容：

属性	作用	适用场景
.innerHTML	获取/设置元素内的 HTML 内容（含标签）	动态插入 HTML 片段
.innerText	获取/设置元素的 文本内容（忽略标签）	纯文本操作
.value	获取/设置表单元素的 值	input/select/textarea

// 示例：修改元素内容
const box = document.querySelector('#box');
box.innerHTML = '<strong>新内容</strong>';  // 解析 HTML

const input = document.querySelector('input');
console.log(input.value);  // 获取输入框的值

四、如何选择方法？

场景	推荐方法
通过 ID 获取	getElementById()
简单选择器	querySelector()
复杂 CSS 选择器	querySelectorAll()
实时更新的集合	getElementsByClassName/TagName()
表单 name 属性	getElementsByName()

💡 专业建议：

1. 优先使用 querySelector 系列：更灵活且符合 CSS 习惯

2. 循环动态集合时注意性能（可转为数组：Array.from(elements)）

3. 避免过度查询：缓存元素 const nav = document.querySelector('nav')