JavaScript操作DOM的核心是“找得到”和“改得对”：用getElementById、querySelector等方法选中元素，再通过textContent/innerHTML修改内容，style/classList/setAttribute修改样式与属性，appendChild/replaceWith等动态更新结构。
JavaScript 操作 DOM 就是通过代码找到网页里的元素，然后读取、修改它的内容、样式、属性，甚至添加或删除它。核心在于“找得到”和“改得对”。
用选择器找到目标元素
就像 CSS 选中元素一样，JS 提供了多种方法定位 DOM 节点：
-
document.getElementById("id")：按 id 查找，最快最常用，例如
document.getElementById("title") -
document.querySelector("css选择器")：支持任意 CSS 选择器（如
"https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bnav .item:first-child"），只返回第一个匹配项 - document.querySelectorAll("css选择器")：返回所有匹配的元素 NodeList（类似数组，可遍历）
- element.parentElement / element.children / element.nextElementSibling：通过已有元素找相邻或父子节点
修改元素的内容
改文字或 HTML 最常用两个属性：
-
element.textContent：只改纯文本，不解析 HTML，安全且快，适合显示用户输入或防止 XSS，例如：
el.textContent = "欢迎回来" -
element.innerHTML：可插入带标签的 HTML 字符串，功能强但要小心注入风险，例如：
el.innerHTML = "点击<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">这里</a>登录"
改变样式和属性
样式和属性分开处理更清晰：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“Java免费学习笔记（深入）”；
-
element.style.xxx：直接设内联样式（注意驼峰命名），如
el.style.color = "red"、el.style.fontSize = "16px" -
element.className 或 element.classList：推荐用
classList.add()、classList.toggle()、classList.remove()控制 CSS 类 -
element.setAttribute("name", "value") 和 element.getAttribute("name")：操作自定义属性或标准属性（如
src、disabled）
添加、删除、替换元素
动态更新结构靠这几个方法：
- parent.appendChild(child)：在末尾加一个子元素
- parent.insertBefore(newEl, referenceEl)：插到某个元素前面
- parent.removeChild(el)：删除指定子元素
- el.replaceWith(newEl)：用新元素替换当前元素（现代写法，简洁）
- 创建新元素用 document.createElement("div")，再设置内容/属性后插入
基本上就这些。关键不是记全所有 API，而是理解“先选中，再操作”，配合浏览器开发者工具实时查看效果，多练几次就自然了。
