17370845950

JavaScript DOM操作核心是获取元素后动态修改内容与结构，常用方法包括getElementById、querySelector、querySelectorAll及父子元素遍历；修改用textContent、innerHTML、outerHTML；增删改用appendChild、insertBefore、removeChild等；属性样式通过setAttribute、className、style、classList和dataset操作。

JavaScript DOM操作的核心是通过脚本获取页面元素，再读取、修改或替换其内容与结构。动态修改网页内容不依赖刷新页面，而是直接操作浏览器内存中的DOM树。

获取目标元素

得先找到要改的元素，常用方法有：

• document.getElementById("id")：按唯一ID获取单个元素，最常用也最快
• document.querySelector("css选择器")：支持类名（.box）、标签（p）、属性（[data-id="1"]）等，返回第一个匹配项
• document.querySelectorAll("div.item")：返回所有匹配的元素 NodeList（类似数组，可遍历）
• element.parentElement / element.children：从已有元素出发，向上找父级或向下找子集，适合局部操作

修改文本和HTML内容

拿到元素后，用这些属性快速更新内容：

• element.textContent = "纯文本"：只改文字，不解析HTML，防XSS更安全
• element.innerHTML = "带标签"：写入并渲染HTML，注意确保内容可信
• element.outerHTML = "...";：替换整个元素（含自身标签），慎用，会丢失事件监听器

例如：document.querySelector("h1").textContent = "新标题";

增删改元素结构

不只是改内容，还能调整DOM树本身：

• element.appendChild(newEl)：在末尾加一个新节点
• element.insertBefore(newEl, refEl)：插到某个参考元素前
• element.removeChild(oldEl)：移除指定子元素
• element.replaceChild(newEl, oldEl)：用新元素替换旧元素
• element.cloneNode(true)：复制元素及全部子节点，常用于批量生成

新建元素用 document.createElement("div")，再设属性、加内容、最后挂到页面上。

修改属性和样式

让元素“看起来不同”或“行为不同”：

• element.setAttribute("class", "active") 或 element.className = "active"
• element.style.color = "red"：直接设行内样式（注意驼峰命名，如 backgroundColor）
• element.classList.add("hidden")：推荐操作class，支持 add/remove/toggle/contains
• element.dataset.id = "123"：快捷设置 data-* 属性（data-id="123"）

样式优先走CSS类控制，JS只负责开关；直接改 style 适合临时、动态值（比如拖拽时 left/top）。

基本上就这些。DOM操作不复杂但容易忽略细节——比如获取元素时元素还没加载完，记得等 DOMContentLoaded 事件；又比如批量插入多个节点，用 DocumentFragment 可减少重排重绘。练熟几个核心API，就能灵活响应用户动作，做出真正交互式的页面。