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

JavaScript操作DOM的核心是获取元素后修改、增删内容及绑定事件。常用方法包括：获取元素（getElementById、querySelector等）、修改内容与属性（textContent、innerHTML、setAttribute等）、添加删除元素（createElement、appendChild、remove等）、事件绑定（addEventListener、event.target等）。

JavaScript 操作 DOM 就是通过 JS 代码读取、修改、添加或删除网页中的 HTML 元素和内容。核心在于获取元素，再调用方法进行操作。下面列出最常用、最实用的 DOM 方法，按使用场景分类说明。

获取元素的方法

这是所有 DOM 操作的第一步，必须先拿到目标元素才能操作它。

• document.getElementById("id")：通过元素的 id 获取单个元素（最常用，性能好）
• document.querySelector("css选择器")：返回匹配的第一个元素（支持 class、标签、属性等任意 CSS 选择器，如 .box、p[data-type="list"]）
• document.querySelectorAll("css选择器")：返回所有匹配的元素，结果是 NodeList（可遍历，但不是数组，需用 forEach 或转成数组）
• document.getElementsByClassName("class") 和 document.getElementsByTagName("p")：返回 HTMLCollection（动态集合，已逐渐被 querySelector 替代）

修改元素内容和属性

拿到元素后，常需要改文字、HTML 结构或属性值。

• element.textContent = "文本"：只改纯文本内容，不解析 HTML（安全，防 XSS）
• element.innerHTML = "带标签的内容"：可插入 HTML，但要注意内容可信，否则有安全风险
• element.setAttribute("data-id", "123")：设置自定义或标准属性
• element.getAttribute("href")：获取属性值（如链接地址、data- 属性）
• element.className = "new-class" 或 element.classList.add("active")：操作 class 更推荐用 classList，支持增删切换：add()、remove()、toggle()、contains()

添加、删除、替换元素

动态构建页面结构离不开这些方法。

标签： css javascript java html js node app ssl ai css选择器