如何用javascript操作DOM_哪些API最常用？

JavaScript DOM操作核心是“查-改-听-动”：查（getElementById/querySelector/遍历）、改（textContent/innerHTML/classList）、听（addEventListener/event.target）、动（append/remove/createDocumentFragment），覆盖日常90%需求。

用 JavaScript 操作 DOM，核心是获取元素、修改内容、控制样式、响应事件和动态增删节点。最常用的是原生 Web API，无需框架，现代浏览器支持良好。

获取元素：选对方法，事半功倍

根据查找方式和返回结果选择合适的方法：

• document.getElementById("id")：唯一、高效，适合单个有 id 的元素
• document.querySelector("css-selector")：灵活，支持类名、属性、伪类等（如 .btn[data-loading]），只返回第一个匹配项
• document.querySelectorAll("css-selector")：返回 NodeList（类数组），适合批量操作，可配合 forEach
• element.parentElement / element.children / element.nextElementSibling：用于在已有元素基础上“就近找”，避免重复查询

修改内容与属性：区分 text、html 和 attribute

别混淆 innerHTML、textContent 和 setAttribute：

• element.textContent = "纯文本"：安全，防 XSS，只改文字不解析 HTML
• element.innerHTML = "带标签"：能渲染 HTML，但需确保内容可信
• element.setAttribute("data-id", "123")：设自定义属性；element.dataset.id = "123" 更简洁（对应 data-id）
• element.className = "active" 或 element.classList.toggle("hidden")：推荐用 classList 操作类名，避免字符串拼接错误

绑定与触发事件：优先用 addEventListener

避免内联事件（onclick=""）和直接赋值（el.onclick = fn），因为只能绑定一个：

标签： css javascript java html node 浏览器 app 工具 ssl 回流 重绘