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') |
⚠️ 注意事项：
-
类数组需用索引访问单个元素：
elements[0] -
动态集合：删除/新增元素会影响结果
-
ID 方法最快速，优先使用
二、querySelector 系列
现代方法，支持 CSS 选择器，返回静态集合（创建时的元素快照）。
| 方法 | 语法 | 返回类型 | 特点 | 示例 |
|---|---|---|---|---|
| querySelector() | document.querySelector('selector') | 单个元素 | 返回匹配的第一个元素 | const btn = document.querySelector('.btn-primary') |
| querySelectorAll() | document.querySelectorAll('selector') | NodeList (静态集合) | 返回所有匹配元素 | const cards = document.querySelectorAll('.card') |
✅ 优势：
-
支持复杂选择器（如：
div > .active[data-id="1"]） -
静态集合不受 DOM 变化影响
-
链式调用：
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() |
💡 专业建议：
-
优先使用
querySelector系列：更灵活且符合 CSS 习惯 -
循环动态集合时注意性能（可转为数组：
Array.from(elements)） -
避免过度查询：缓存元素
const nav = document.querySelector('nav')
原文地址：https://blog.csdn.net/2401_87008233/article/details/148513470
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！