javascript如何操作DOM_有哪些常用方法

JavaScript操作DOM的核心是“选中元素→操作内容/属性/结构”：先用getElementById、querySelector等获取元素，再通过textContent、innerHTML、classList等修改内容与属性，用createElement、appendChild等增删改结构，最后用addEventListener绑定事件。

JavaScript 操作 DOM 的核心，就是通过内置 API 获取、修改、添加或删除页面元素。关键不在于记多少方法，而在于理解“选中元素 → 操作内容/属性/结构”这个流程。

获取元素（选择器是基础）

所有操作的前提是先拿到目标元素对象：

• document.getElementById("id")：按 ID 获取单个元素，最快最常用
• document.querySelector("css-selector")：返回匹配的第一个元素（支持 class、tag、属性等任意 CSS 选择器）
• document.querySelectorAll("css-selector")：返回 NodeList（类数组），包含所有匹配元素
• document.getElementsByClassName("cls") 或 document.getElementsByTagName("p")：返回 HTMLCollection，实时集合（注意不是数组）

修改内容与属性

拿到元素后，常用方式有：

• element.textContent = "纯文本"：只改文字内容，不解析 HTML，安全且高效
• element.innerHTML = "带标签"：可插入 HTML，但需防 XSS，慎用
• element.setAttribute("data-id", "123") 或 element.dataset.id = "123"：设置自定义属性（data-*）
• element.className = "btn active" 或 element.classList.add("disabled")：操作 class 更推荐 classList（支持 add/remove/toggle/contains）

增删改元素结构

动态构建或调整 DOM 树：

标签： css javascript java html node app ssl ai