引言文档对象模型的重要性在Web开发的学习旅程中当掌握了JavaScript的基本语法和对象概念之后下一个重要的里程碑就是学会如何与网页文档进行交互。编写网页和应用程序时开发者最核心的需求之一就是能够以编程方式操纵文档结构动态地改变页面内容和样式响应用户的操作。这一切的实现都依赖于文档对象模型DOMDocument Object Model。DOM是一套庞大的API集合它大量使用了Document对象为开发者提供了控制HTML结构和样式信息的标准化接口。通过DOMJavaScript得以将静态的HTML文档转变为一个可编程操作的对象结构使得页面不再是固定不变的而是可以根据用户行为、数据变化或任何其他条件动态更新。一、Web浏览器的重要部分理解全局上下文Web浏览器是一个非常复杂的软件系统由许多活动部件协同工作。出于安全考虑浏览器对Web开发者能够控制和操纵的部分做了严格限制——这种安全沙箱机制是Web生态健康发展的重要保障。在浏览器的架构中有三个最核心的部分是开发者会频繁接触的对象JavaScript表示职责窗口Window浏览器标签页的全局对象所有全局变量和函数都是其成员导航器Navigator代表浏览器状态和身份用户代理提供语言、在线状态等信息文档Document加载到窗口中的页面内容的DOM表示是DOM操作的入口// Window页面运行环境window.innerWidth;// 获取窗口宽度window.innerHeight;// 获取窗口高度// Navigator浏览器信息navigator.language;// 用户首选语言navigator.onLine;// 浏览器是否在线// Document页面的 DOM 入口document.title;// 页面标题Window对象处于浏览器JavaScript环境的顶层代表着整个浏览器页面的运行环境。Document是本文的重点但理解三者的角色同样重要。二、文档对象模型树状结构的核心概念每一个浏览器标签页中加载的文档都由一个文档对象模型来表示。DOM是由浏览器创建的树状结构表示将HTML文档的结构映射为节点树。2.1 示例HTML文档!doctypehtmlhtmllangen-USheadmetacharsetutf-8/titleSimple DOM example/title/headbodysectionimgsrcdinosaur.pngaltA red Tyrannosaurus Rex/pHere we will add a link to theahrefhttps://www.mozilla.org/Mozilla homepage/a/p/section/body/html2.2 DOM树可视化document └── html (根节点) ├── head │ ├── meta │ └── title │ └── #text: Simple DOM example └── body └── section ├── img └── p ├── #text: Here we will add a link to the └── a (hrefhttps://www.mozilla.org/) └── #text: Mozilla homepage2.3 节点类型与关系术语术语定义示例元素节点代表HTML元素section、p、img文本节点代表元素的文本内容#text根节点DOM树顶层节点html父节点包含其他节点的节点body是section的父节点子节点直接位于另一个节点内部的节点img是section的子节点后代节点位于另一个节点内部任意层级的节点img是body的后代节点兄弟节点DOM树中同层级、共享同一父节点的节点img和p是兄弟节点这些术语不仅在DOM编程中频繁出现在CSS选择器中也有对应的概念。熟悉这些术语对于理解和编写DOM操作代码至关重要。三、基本DOM操作从选择到修改的完整流程操作DOM内的元素第一步始终是选择目标元素并将其引用存储在一个变量中。3.1 现代选择方法方法参数返回值说明document.querySelector()CSS选择器单个元素返回第一个匹配的元素document.querySelectorAll()CSS选择器NodeList返回所有匹配的元素集合constlinkdocument.querySelector(a);// 选择文档中第一个 a 元素constallLinksdocument.querySelectorAll(a);// 选择文档中所有 a 元素返回 NodeList3.2 传统选择方法document.getElementById(header);// 通过 id 选择document.getElementsByTagName(div);// 通过标签名选择document.getElementsByClassName(box);// 通过类名选择querySelector()和querySelectorAll()是推荐的现代方法灵活性远高于传统方法。3.3 修改元素属性和内容constlinkdocument.querySelector(a);link.textContentMozilla Developer Network;// 修改文本内容link.hrefhttps://developer.mozilla.org;// 修改链接目标属性作用示例textContent获取/设置元素的文本内容link.textContent 新文字hrefa元素的链接地址link.href https://...srcimg元素的图片地址img.src photo.jpgvalue表单元素的值input.value ...四、创建和放置新节点动态构建页面内容掌握了选择已有元素的方法之后下一个关键技能是创建新元素并将它们添加到文档中。4.1 创建元素constsectdocument.querySelector(section);constparadocument.createElement(p);para.textContentWe hope you enjoyed the ride.;此时新元素只存在于JavaScript的内存中并没有出现在页面上。4.2 追加到页面sect.appendChild(para);Node.appendChild()将指定节点追加到调用者的子节点列表末尾。4.3 创建文本节点consttextdocument.createTextNode( — the premier source for web development knowledge.,);constlinkParadocument.querySelector(p);linkPara.appendChild(text);Document.createTextNode()创建纯文本节点适用于需要保留元素内已有内容、只追加新文本的场景。4.4 DOM操作三步走模式① createElement(标签名) → 在内存中创建元素 ② textContent 内容 → 设置元素文本 ③ parent.appendChild(el) → 添加到页面五、移动和删除元素灵活控制DOM结构5.1 移动元素由于DOM中每个元素只能存在于一个位置将已有元素appendChild()到另一个父节点时它会自动从原位置移动到新位置。sect.appendChild(linkPara);// linkPara 从原来的位置移动到 sect 的底部linkPara持有的是该元素的唯一实例引用appendChild()操作的是同一个元素不是复制。如需复制使用Node.cloneNode()。5.2 删除元素方法语法兼容性Node.removeChild()parent.removeChild(child)所有浏览器Element.remove()element.remove()现代浏览器传统兼容写法element.parentNode.removeChild(element)所有浏览器// 方式一通过父节点删除需持有父节点引用sect.removeChild(linkPara);// 方式二元素自己移除现代写法linkPara.remove();// 方式三传统兼容写法linkPara.parentNode.removeChild(linkPara);六、操作样式JavaScript与CSS的协作之道6.1 方式一直接操作 style 属性内联样式para.style.colorwhite;para.style.backgroundColorblack;para.style.padding10px;para.style.width250px;para.style.textAligncenter;CSS属性名 → JavaScript属性名转换规则去掉连字符将连字符后的字母大写。CSS属性名JavaScript属性名background-colorbackgroundColortext-aligntextAlignfont-sizefontSizemargin-topmarginTop⚠️ 混淆两种命名方式是初学者常见错误。6.2 方式二操作 class 属性推荐将样式定义保留在CSS中JavaScript只负责切换类名实现样式和行为分离。/* CSS 文件 */.highlight{color:white;background-color:black;padding:10px;width:250px;text-align:center;}// JavaScript 文件para.setAttribute(class,highlight);6.3 两种方式对比维度element.style切换class维护性❌ 样式散落在JS中✅ CSS集中管理关注点分离❌ 混合✅ 分离适用场景运行时动态计算的值预定义的样式变体优先级内联样式最高样式表中的规则七、实战项目动态购物清单应用让我们通过构建一个动态购物清单应用来综合运用所学的DOM操作技能。7.1 需求分析功能描述添加项目用户在输入框中输入购物项目点击按钮后添加到清单删除项目每个清单项旁有删除按钮点击可移除该项目自动清空添加项目后输入框自动清空并重新获得焦点7.2 获取DOM引用constlistdocument.querySelector(ul);constinputdocument.querySelector(input);constbuttondocument.querySelector(button);7.3 添加按钮的点击处理button.addEventListener(click,(){constmyIteminput.value;// ① 先保存输入值input.value;// ② 再清空输入框⚠️ 顺序很重要必须先保存值再清空否则会丢失用户输入的内容。7.4 创建DOM元素并组装constlistItemdocument.createElement(li);constlistTextdocument.createElement(span);constlistBtndocument.createElement(button);listItem.appendChild(listText);listText.textContentmyItem;listItem.appendChild(listBtn);listBtn.textContentDelete;list.appendChild(listItem);生成的HTML结构lispan用户输入的项目名/spanbuttonDelete/button/li7.5 删除功能listBtn.addEventListener(click,(){list.removeChild(listItem);});7.6 焦点管理input.focus();// 输入框重新获得焦点});7.7 完整代码constlistdocument.querySelector(ul);constinputdocument.querySelector(input);constbuttondocument.querySelector(button);button.addEventListener(click,(){constmyIteminput.value;input.value;constlistItemdocument.createElement(li);constlistTextdocument.createElement(span);constlistBtndocument.createElement(button);listItem.appendChild(listText);listText.textContentmyItem;listItem.appendChild(listBtn);listBtn.textContentDelete;list.appendChild(listItem);listBtn.addEventListener(click,(){list.removeChild(listItem);});input.focus();});执行流程图用户点击添加按钮 ↓ ① 保存 input.value → myItem ② 清空 input.value ③ 创建 li、span、button ④ 设置 span.textContent myItem ⑤ 设置 button.textContent Delete ⑥ 组装li → span button ⑦ 添加到 ul ⑧ 为 button 绑定删除事件 ⑨ input.focus()总结知识点核心内容DOM本质HTML文档的树状结构表示可编程操作的对象模型浏览器三核心Window全局环境、Navigator浏览器信息、DocumentDOM入口现代选择方法querySelector()选单个querySelectorAll()选所有创建元素createElement()内存中创建appendChild()添加到页面移动元素appendChild()操作同一实例自动从原位置移动删除元素parent.removeChild(child)或element.remove()样式操作element.style设置内联样式切换class更推荐CSS属性转换background-color→backgroundColor小驼峰实战模式选择 → 创建 → 设置 → 组装 → 追加 → 事件绑定掌握了这些基础能力后开发者就具备了构建动态交互式网页的基本功。DOM编程的核心在于理解文档是一个可编程操作的对象结构——每一个HTML元素、每一段文本都是一个节点JavaScript可以通过标准化的API来访问和修改这些节点。还在为 JavaScript 代码写得像“意大利面条”、逻辑混乱难以维护而头秃收藏本文持续跟进后续将系统分享 JS 高效语法糖、浏览器兼容与 Polyfill 实战、手写核心源码解析、常见坑点避雷指南从基础语法到进阶逻辑一站式打通助你快速提升前端开发硬实力
跟着 MDN 学JavaScript day_26：DOM脚本编程入门完全指南
引言文档对象模型的重要性在Web开发的学习旅程中当掌握了JavaScript的基本语法和对象概念之后下一个重要的里程碑就是学会如何与网页文档进行交互。编写网页和应用程序时开发者最核心的需求之一就是能够以编程方式操纵文档结构动态地改变页面内容和样式响应用户的操作。这一切的实现都依赖于文档对象模型DOMDocument Object Model。DOM是一套庞大的API集合它大量使用了Document对象为开发者提供了控制HTML结构和样式信息的标准化接口。通过DOMJavaScript得以将静态的HTML文档转变为一个可编程操作的对象结构使得页面不再是固定不变的而是可以根据用户行为、数据变化或任何其他条件动态更新。一、Web浏览器的重要部分理解全局上下文Web浏览器是一个非常复杂的软件系统由许多活动部件协同工作。出于安全考虑浏览器对Web开发者能够控制和操纵的部分做了严格限制——这种安全沙箱机制是Web生态健康发展的重要保障。在浏览器的架构中有三个最核心的部分是开发者会频繁接触的对象JavaScript表示职责窗口Window浏览器标签页的全局对象所有全局变量和函数都是其成员导航器Navigator代表浏览器状态和身份用户代理提供语言、在线状态等信息文档Document加载到窗口中的页面内容的DOM表示是DOM操作的入口// Window页面运行环境window.innerWidth;// 获取窗口宽度window.innerHeight;// 获取窗口高度// Navigator浏览器信息navigator.language;// 用户首选语言navigator.onLine;// 浏览器是否在线// Document页面的 DOM 入口document.title;// 页面标题Window对象处于浏览器JavaScript环境的顶层代表着整个浏览器页面的运行环境。Document是本文的重点但理解三者的角色同样重要。二、文档对象模型树状结构的核心概念每一个浏览器标签页中加载的文档都由一个文档对象模型来表示。DOM是由浏览器创建的树状结构表示将HTML文档的结构映射为节点树。2.1 示例HTML文档!doctypehtmlhtmllangen-USheadmetacharsetutf-8/titleSimple DOM example/title/headbodysectionimgsrcdinosaur.pngaltA red Tyrannosaurus Rex/pHere we will add a link to theahrefhttps://www.mozilla.org/Mozilla homepage/a/p/section/body/html2.2 DOM树可视化document └── html (根节点) ├── head │ ├── meta │ └── title │ └── #text: Simple DOM example └── body └── section ├── img └── p ├── #text: Here we will add a link to the └── a (hrefhttps://www.mozilla.org/) └── #text: Mozilla homepage2.3 节点类型与关系术语术语定义示例元素节点代表HTML元素section、p、img文本节点代表元素的文本内容#text根节点DOM树顶层节点html父节点包含其他节点的节点body是section的父节点子节点直接位于另一个节点内部的节点img是section的子节点后代节点位于另一个节点内部任意层级的节点img是body的后代节点兄弟节点DOM树中同层级、共享同一父节点的节点img和p是兄弟节点这些术语不仅在DOM编程中频繁出现在CSS选择器中也有对应的概念。熟悉这些术语对于理解和编写DOM操作代码至关重要。三、基本DOM操作从选择到修改的完整流程操作DOM内的元素第一步始终是选择目标元素并将其引用存储在一个变量中。3.1 现代选择方法方法参数返回值说明document.querySelector()CSS选择器单个元素返回第一个匹配的元素document.querySelectorAll()CSS选择器NodeList返回所有匹配的元素集合constlinkdocument.querySelector(a);// 选择文档中第一个 a 元素constallLinksdocument.querySelectorAll(a);// 选择文档中所有 a 元素返回 NodeList3.2 传统选择方法document.getElementById(header);// 通过 id 选择document.getElementsByTagName(div);// 通过标签名选择document.getElementsByClassName(box);// 通过类名选择querySelector()和querySelectorAll()是推荐的现代方法灵活性远高于传统方法。3.3 修改元素属性和内容constlinkdocument.querySelector(a);link.textContentMozilla Developer Network;// 修改文本内容link.hrefhttps://developer.mozilla.org;// 修改链接目标属性作用示例textContent获取/设置元素的文本内容link.textContent 新文字hrefa元素的链接地址link.href https://...srcimg元素的图片地址img.src photo.jpgvalue表单元素的值input.value ...四、创建和放置新节点动态构建页面内容掌握了选择已有元素的方法之后下一个关键技能是创建新元素并将它们添加到文档中。4.1 创建元素constsectdocument.querySelector(section);constparadocument.createElement(p);para.textContentWe hope you enjoyed the ride.;此时新元素只存在于JavaScript的内存中并没有出现在页面上。4.2 追加到页面sect.appendChild(para);Node.appendChild()将指定节点追加到调用者的子节点列表末尾。4.3 创建文本节点consttextdocument.createTextNode( — the premier source for web development knowledge.,);constlinkParadocument.querySelector(p);linkPara.appendChild(text);Document.createTextNode()创建纯文本节点适用于需要保留元素内已有内容、只追加新文本的场景。4.4 DOM操作三步走模式① createElement(标签名) → 在内存中创建元素 ② textContent 内容 → 设置元素文本 ③ parent.appendChild(el) → 添加到页面五、移动和删除元素灵活控制DOM结构5.1 移动元素由于DOM中每个元素只能存在于一个位置将已有元素appendChild()到另一个父节点时它会自动从原位置移动到新位置。sect.appendChild(linkPara);// linkPara 从原来的位置移动到 sect 的底部linkPara持有的是该元素的唯一实例引用appendChild()操作的是同一个元素不是复制。如需复制使用Node.cloneNode()。5.2 删除元素方法语法兼容性Node.removeChild()parent.removeChild(child)所有浏览器Element.remove()element.remove()现代浏览器传统兼容写法element.parentNode.removeChild(element)所有浏览器// 方式一通过父节点删除需持有父节点引用sect.removeChild(linkPara);// 方式二元素自己移除现代写法linkPara.remove();// 方式三传统兼容写法linkPara.parentNode.removeChild(linkPara);六、操作样式JavaScript与CSS的协作之道6.1 方式一直接操作 style 属性内联样式para.style.colorwhite;para.style.backgroundColorblack;para.style.padding10px;para.style.width250px;para.style.textAligncenter;CSS属性名 → JavaScript属性名转换规则去掉连字符将连字符后的字母大写。CSS属性名JavaScript属性名background-colorbackgroundColortext-aligntextAlignfont-sizefontSizemargin-topmarginTop⚠️ 混淆两种命名方式是初学者常见错误。6.2 方式二操作 class 属性推荐将样式定义保留在CSS中JavaScript只负责切换类名实现样式和行为分离。/* CSS 文件 */.highlight{color:white;background-color:black;padding:10px;width:250px;text-align:center;}// JavaScript 文件para.setAttribute(class,highlight);6.3 两种方式对比维度element.style切换class维护性❌ 样式散落在JS中✅ CSS集中管理关注点分离❌ 混合✅ 分离适用场景运行时动态计算的值预定义的样式变体优先级内联样式最高样式表中的规则七、实战项目动态购物清单应用让我们通过构建一个动态购物清单应用来综合运用所学的DOM操作技能。7.1 需求分析功能描述添加项目用户在输入框中输入购物项目点击按钮后添加到清单删除项目每个清单项旁有删除按钮点击可移除该项目自动清空添加项目后输入框自动清空并重新获得焦点7.2 获取DOM引用constlistdocument.querySelector(ul);constinputdocument.querySelector(input);constbuttondocument.querySelector(button);7.3 添加按钮的点击处理button.addEventListener(click,(){constmyIteminput.value;// ① 先保存输入值input.value;// ② 再清空输入框⚠️ 顺序很重要必须先保存值再清空否则会丢失用户输入的内容。7.4 创建DOM元素并组装constlistItemdocument.createElement(li);constlistTextdocument.createElement(span);constlistBtndocument.createElement(button);listItem.appendChild(listText);listText.textContentmyItem;listItem.appendChild(listBtn);listBtn.textContentDelete;list.appendChild(listItem);生成的HTML结构lispan用户输入的项目名/spanbuttonDelete/button/li7.5 删除功能listBtn.addEventListener(click,(){list.removeChild(listItem);});7.6 焦点管理input.focus();// 输入框重新获得焦点});7.7 完整代码constlistdocument.querySelector(ul);constinputdocument.querySelector(input);constbuttondocument.querySelector(button);button.addEventListener(click,(){constmyIteminput.value;input.value;constlistItemdocument.createElement(li);constlistTextdocument.createElement(span);constlistBtndocument.createElement(button);listItem.appendChild(listText);listText.textContentmyItem;listItem.appendChild(listBtn);listBtn.textContentDelete;list.appendChild(listItem);listBtn.addEventListener(click,(){list.removeChild(listItem);});input.focus();});执行流程图用户点击添加按钮 ↓ ① 保存 input.value → myItem ② 清空 input.value ③ 创建 li、span、button ④ 设置 span.textContent myItem ⑤ 设置 button.textContent Delete ⑥ 组装li → span button ⑦ 添加到 ul ⑧ 为 button 绑定删除事件 ⑨ input.focus()总结知识点核心内容DOM本质HTML文档的树状结构表示可编程操作的对象模型浏览器三核心Window全局环境、Navigator浏览器信息、DocumentDOM入口现代选择方法querySelector()选单个querySelectorAll()选所有创建元素createElement()内存中创建appendChild()添加到页面移动元素appendChild()操作同一实例自动从原位置移动删除元素parent.removeChild(child)或element.remove()样式操作element.style设置内联样式切换class更推荐CSS属性转换background-color→backgroundColor小驼峰实战模式选择 → 创建 → 设置 → 组装 → 追加 → 事件绑定掌握了这些基础能力后开发者就具备了构建动态交互式网页的基本功。DOM编程的核心在于理解文档是一个可编程操作的对象结构——每一个HTML元素、每一段文本都是一个节点JavaScript可以通过标准化的API来访问和修改这些节点。还在为 JavaScript 代码写得像“意大利面条”、逻辑混乱难以维护而头秃收藏本文持续跟进后续将系统分享 JS 高效语法糖、浏览器兼容与 Polyfill 实战、手写核心源码解析、常见坑点避雷指南从基础语法到进阶逻辑一站式打通助你快速提升前端开发硬实力
