17370845950

DOM是浏览器将HTML解析成的树状节点结构，以document为根，包含元素、文本、属性等节点；可通过getElementById、querySelector等方法查找元素；支持修改内容、属性、样式及增删改节点操作；需确保DOM加载完成后再执行脚本。

DOM（Document Object Model，文档对象模型）是浏览器将 HTML 文档解析成的一棵树状结构，每个 HTML 标签、文本、属性都变成一个“节点”（Node），JavaScript 通过操作这些节点来动态改变网页内容、结构和样式。

DOM 是怎么组织的？

打开网页后，浏览器会把 HTML 转成一棵“节点树”：最顶层是 document 对象，它下面有 html 元素节点，再往下是 head、body，body 里又有 div、p、button 等。所有元素都可通过 JavaScript 访问和修改。

怎么找到想要操作的元素？

常用方法有：

• document.getElementById("id") —— 通过唯一 id 获取单个元素
• document.querySelector("css选择器") —— 类似 CSS 写法，如 ".btn" 或 "input[type='text']"
• document.querySelectorAll("css选择器") —— 返回所有匹配的元素集合（NodeList）
• document.getElementsByTagName("div") —— 按标签名获取（返回 HTMLCollection）

怎么修改元素的内容和属性？

拿到元素后，就能直接改它的内容或特性：

• element.textContent = "新文字" —— 替换纯文本（不解析 HTML）
• element.innerHTML = "加粗" —— 插入带标签的 HTML（注意 XSS 风险）
• element.setAttribute("class", "active") 或 element.className = "active"
• element.style.color = "red" —— 修改行内样式（驼峰命名，如 backgroundColor）

怎么添加、删除或移动元素？

DOM 提供了灵活的“增删改查”能力：

• document.createElement("p") 创建新元素
• parent.appendChild(newElement) 添加到末尾
• parent.insertBefore(newElement, referenceElement) 插入到指定位置前
• element.remove() 删除自身（现代写法，简洁）
• oldElement.replaceWith(newElement) 直接替换

什么时候执行操作最安全？

确保 DOM 已加载完成再运行脚本，否则可能找不到元素：

• 把 JS 放在