DOM是HTML在内存中的结构化对象树，提供getElementById、querySelector等方法获取元素，支持textContent、innerHTML等修改内容，createElement等动态操作节点，并通过addEventListener响应用户交互。
DOM（Document Object Model）是浏览器把 HTML 文档解析成的一棵对象树，每个网页元素（比如 、
、
）都变成一个可被 JavaScript 访问和操作的“节点”。它不是 HTML 本身，而是 HTML 在内存中的结构化表示。
如何获取网页元素
常用方法有：
-
document.getElementById("id")：通过唯一 id 获取单个元素，最常用也最快
-
document.querySelector("css选择器")：支持类名（
.btn）、标签（h2）、属性（[data-id]）等，只返回第一个匹配项
-
document.querySelectorAll("css选择器")：返回所有匹配元素的静态 NodeList（类似数组，可遍历）
-
document.getElementsByClassName("cls") 或 document.getElementsByTagName("div")：返回 HTMLCollection，实时更新，但兼容性略老，现在多用 querySelector 系列
如何修改元素内容和属性
拿到元素后，就能读写它的内容与状态：
-
element.textContent：设置或读取纯文本内容（不解析 HTML，防 XSS 更安全）
-
element.innerHTML：设置或读取含 HTML 标签的内容（注意：会重新解析并渲染，慎用于用户输入）
-
element.setAttribute("name", "value") 或直接 element.name = "value"（对内置属性如
id、className、src 有效）
-
element.classList.add/remove/toggle("cls")：安全操作 CSS 类名，比直接改
className 更可靠
如何创建、插入和删除元素
动态构建页面结构的关键步骤：
Gridster.js多列网格式拖动布局插件
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
下载
立即学习“Java免费学习笔记（深入）”；
-
document.createElement("div")：创建新元素节点
-
element.appendChild(newNode)：在末尾添加子节点
-
element.insertBefore(newNode, referenceNode)：在指定位置前插入
-
element.remove()：直接删除自身（现代写法，替代
parentNode.removeChild(element)）
-
element.replaceWith(newNode)：用新节点替换当前节点
如何响应用户交互
给元素绑定事件，让页面“活起来”：
-
element.addEventListener("click", handler)：推荐方式，支持多次绑定同一事件，且可移除（
removeEventListener）
-
element.onclick = function() {...}：简单场景可用，但会覆盖之前的 onclick
- 常见事件名：
"input"（表单输入）、"submit"（表单提交）、"keydown"（键盘按下）、"change"（选中/值变更）等
- 事件处理函数中，
this 指向触发事件的元素；也可用 event.target 明确获取目标节点
