DOM是浏览器将HTML解析成的树状节点结构，以document为根，包含元素、文本、属性等节点；可通过getElementById、querySelector等方法查找元素；支持修改内容、属性、样式及增删改节点操作；需确保DOM加载完成后再执行脚本。
DOM（Document Object Model，文档对象模型）是浏览器将 HTML 文档解析成的一棵树状结构，每个 HTML 标签、文本、属性都变成一个“节点”（Node），JavaScript 通过操作这些节点来动态改变网页内容、结构和样式。
DOM 是怎么组织的？
打开网页后，浏览器会把 HTML 转成一棵“节点树”：最顶层是 red">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）
怎么修改元素的内容和属性？
拿到元素后，就能直接改它的内容或特性：
Gridster.js多列网格式拖动布局插件
下载
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
立即学习“Java免费学习笔记（深入）”；
- 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 放在
