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')

相关推荐
qq_三哥啊1 小时前
【HTML】<script>元素中的 defer 和 async 属性详解
html·js
深职第一突破口喜羊羊1 小时前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking1 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵1 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆1 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七2 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03012 小时前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati2 小时前
JavaScript Promise完整指南
javascript
德育处主任Pro3 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端
拾光拾趣录3 小时前
setTimeout(1) 和 setTimeout(2) 的区别
前端·v8