什么是javascript中的DOM_如何使用它来操作网页元素【教程】

关键点：

• document 是 DOM 的入口，不是全局变量也不是 JS 内置对象
• DOM 节点有层级关系：parentNode、childNodes、nextSibling 等属性反映 HTML 结构
• DOM 变化会立即触发页面重绘（但批量操作时要注意性能）

常用获取元素的方法及其差异

选错方法会导致查不到元素、返回类型不符、或兼容性问题。注意返回值类型和适用场景：

立即学习“Java免费学习笔记（深入）”；

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

下载

• document.getElementById("id")：只返回单个元素，ID 必须唯一，不支持 CSS 选择器
• document.querySelector("css-selector")：返回第一个匹配元素，支持复杂选择器如 "nav ul li.active"
• document.querySelectorAll("css-selector")：返回 NodeList（类数组，非 Array），需用 [...nodeList] 展开才能用 map() 等
• document.getElementsByClassName("cls")：返回实时 HTMLCollection，DOM 变动会自动更新内容，但不能直接调用 forEach

错误常见于：用 getElementsByClassName 返回结果直接链式调用 .style.color = "red" —— 它返回的是集合，不是单个元素。

修改元素内容与属性的正确方式

别用 innerHTML 直接拼接用户输入，也别把 value 当作所有表单控件的通用取值方式：

• 设文本内容优先用 textContent（安全、快），仅当需渲染 HTML 时才用 innerHTML
• 表单元素取值： 和 用 .value； 用 .value 或 .selectedOptions[0].value； 用 .checked
• 设属性用 element.setAttribute("attr", "val")，但内置属性（如 id、className、disabled）应直接赋值：el.id = "new-id"、el.className = "a b"、el.disabled = true

const btn = document.querySelector("button");
btn.textContent = "已提交"; // ✅ 安全设置文本
btn.setAttribute("data-status", "done"); // ✅ 自定义属性
btn.disabled = true; // ✅ 布尔属性直接赋值，不用 setAttribute

事件监听必须用 addEventListener，不要写 onclick=...

内联事件（ —— 支持多次绑定、可传参（用闭包或 bind）、可指定 { once: true, capture: false }

移除时必须传入**同一个函数引用**：element.removeEventListener("click", handler)，匿名函数无法移除

动态添加的元素要委托到父级（事件委托）：document.querySelector("ul").addEventListener("click", e => { if (e.target.tagName === "LI") { ... } })

容易忽略的一点：监听器里 this 指向当前触发事件的元素，但箭头函数会丢失它 —— 所以事件回调别用箭头函数，除非你明确不需要 this。