如何用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免费学习笔记（深入）”；

标签： css javascript java html node app ssl 区别 html元素 red