如何用JavaScript操作HTML元素？

JavaScript操作HTML元素的核心是先用querySelector等方法获取元素，再通过textContent、style、classList等属性或addEventListener等方法修改内容、样式、属性及绑定事件。

用 JavaScript 操作 HTML 元素，核心是先“找到”元素，再“做事情”——比如改内容、加样式、响应点击。关键不在写多少代码，而在理解 获取元素 和 操作属性/事件 这两个环节。

用 querySelector 找到你要操作的元素

现代最常用的是 document.querySelector()（找第一个）和 document.querySelectorAll()（找全部），支持 CSS 选择器语法，直观好记。

• document.querySelector('#header') → 找 id 为 header 的元素
• document.querySelector('.btn') → 找第一个 class 是 btn 的元素
• document.querySelectorAll('li a') → 找所有 li 里的 a 标签，返回 NodeList

老方法如 getElementById 或 getElementsByClassName 也能用，但灵活性和可读性不如 querySelector 系列。

修改内容、属性和样式

拿到元素后，直接通过属性或方法更新它：

立即学习“Java免费学习笔记（深入）”；

List.js一个能够实现搜索、 排序、 筛选器的JavaScript插件

List.js是一个支持多种浏览器，不依赖于任何框架的JavaScript包用于改进现有HTML列表元素的功能

25

查看详情

• el.textContent = '新文字' → 安全替换纯文本（不解析 HTML）
• el.innerHTML = '<strong>加粗了</strong>' → 替换 HTML 内容（注意 XSS 风险）
• el.setAttribute('data-id', '123') 或 el.dataset.id = '123' → 设置自定义属性
• el.style.color = 'red' → 直接改行内样式（驼峰命名）
• el.classList.add('active')、.remove()、.toggle() → 安全操作 class

给元素添加交互行为

用 addEventListener 绑定事件，比 onclick 属性更灵活、可多次绑定：

• button.addEventListener('click', () => { console.log('点到了'); })
• 支持多种事件：'input'、'submit'、'keydown'、'mouseenter' 等
• 事件回调里用 e.target 获取被点击的具体元素（适合事件委托）

例如，给列表用事件委托：list.addEventListener('click', e => { if (e.target.tagName === 'LI') { ... } })。

动态创建和插入新元素

想加内容？别拼字符串，用原生 API 更可靠：

• const p = document.createElement('p') → 创建元素
• p.textContent = '这是新段落' → 设置内容
• parent.appendChild(p) → 插入到最后
• parent.insertBefore(p, parent.firstChild) → 插到最前
• el.remove() → 直接删掉这个元素（不用找父节点）

基本上就这些。不复杂但容易忽略细节：选对方法、注意 textContent 和 innerHTML 的区别、优先用 addEventListener、善用 classList。写多了自然就顺手了。

以上就是如何用JavaScript操作HTML元素？的详细内容，更多请关注php中文网其它相关文章！