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
javascript 复制代码
// 示例:修改元素内容
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')

相关推荐
布兰妮甜6 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia6 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
StrongerIrene15 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子25 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*168833 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
veminhe34 分钟前
html怎么设置html5
html·html5
程序员爱钓鱼1 小时前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python