文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载DOMDocument Object Model文档对象模型是浏览器对 HTML 文档的内存表示也是 JavaScript 操作页面的基础。本文围绕《现代 JavaScript 教程》Modern JavaScript Tutorial的 DOM 树章节 展开系统讲解 HTML 标签、文本、注释如何在浏览器中组织成一棵可编程的对象树并给出节点类型、浏览器自动纠错规则以及开发者工具实操方法帮助你在进入 DOM 遍历与操作之前建立完整的结构认知。HTML 的骨架每个标签都是一个对象一个 HTML 文档的骨干是标签tags。按照 DOM 的约定每个 HTML 标签都是一个对象被嵌套的标签是外层标签的孩子children标签内部的文本同样也是对象。所有这些对象都可以通过 JavaScript 访问并用来修改页面。例如document.body就是表示body标签的对象。下面的代码会把页面背景变成红色并在 3 秒后恢复原样document.body.style.background red; // 把背景设为红色 setTimeout(() document.body.style.background , 3000); // 3 秒后恢复这里使用的是style.background属性但节点对象上还有大量其他属性和方法例如innerHTML—— 节点的 HTML 内容offsetWidth—— 节点宽度像素……以及更多。在后续章节中我们会学习更多 DOM 操作方式但首先需要理解 DOM 的结构本身。仓库中的下一章 Walking the DOM遍历 DOM 就建立在本文的结构基础之上从document这个入口点开始访问任意节点。一个 DOM 实例从文档到对象树先看一份最简单的文档!DOCTYPE HTML html head titleAbout elk/title /head body The truth about elk. /body /html浏览器会把这段 HTML 表示成由标签构成的树形结构html位于树根head和body是它的孩子依次向下title是head的孩子文本About elk是title的孩子。标签是元素节点element nodes它们构成了树的主干。标签内部的文本构成文本节点text nodes在图上标记为#text。文本节点只包含一个字符串它不能有子节点永远是树的叶子节点。例如title标签内的文本就是About elk。需要特别注意的是文本节点中的特殊字符换行符↵在 JavaScript 中写作\n空格␣。空格和换行是完全合法的字符和字母、数字一样。它们会形成文本节点并成为 DOM 的一部分。所以在上面的例子中head标签里title之前的空格和换行也构成了一个#text节点内容只有换行和若干空格。不过有两个顶层的例外出于历史原因head之前的空格和换行会被忽略如果我们在/body之后放任何内容浏览器会把它自动移到body内部末尾——因为 HTML 规范要求所有内容都必须位于body之内所以/body之后不可能存在空格。其他情况则很直接文档中的空格如同任何字符一样会变成 DOM 中的文本节点如果把它们删掉DOM 里也就不会有它们。例如下面这份紧凑的 HTML 就没有任何仅含空格的文本节点!DOCTYPE HTML htmlheadtitleAbout elk/title/headbodyThe truth about elk./body/html:::smart 提示开发者工具通常会隐藏行首行尾空格和纯空白的文本节点 浏览器自带的 DOM 工具后面的章节会介绍通常不会显示文本首尾的空格以及标签之间由换行形成的空文本节点——这样做是为了节省屏幕空间。本文后续的 DOM 示意图中在不影响理解时也会省略这些空白节点。这些空格一般不影响页面显示效果。 :::自动纠错浏览器会修补残缺的 HTML浏览器在构建 DOM 时如果遇到格式不规范的 HTML会自动进行修正。例如顶层标签永远都是html即使文档里根本没有htmlDOM 中也会存在它因为浏览器会自行创建body同理。举例来说如果 HTML 文件只有孤零零的一个单词Hello浏览器会把它包进html和body并补上必需的head最终 DOM 结构为html→head无子节点body→#text(Hello)。在生成 DOM 的过程中浏览器还会自动处理文档中的各类错误、补齐闭合标签等等。例如下面这段所有标签都未闭合的文档pHello liMom liand liDad浏览器读取标签后会补全缺失部分生成一个完全正常的 DOMp中的文本Hello以及三个li中分别包含Mom、and、Dad。表格总是有tbody一个有趣的特殊情况是表格。按 DOM 规范表格必须有tbody标签但 HTML 文本中可以省略它这时浏览器会在 DOM 中自动创建tbody。比如对于下面的 HTMLtable idtabletrtd1/td/tr/table生成的 DOM 结构是TABLE→TBODY→TR→TD→#text(1)。也就是说tbody是凭空冒出来的。我们在处理表格时应当记住这一点以免产生意外。其他节点类型注释、DOCTYPE 与 document除了元素节点和文本节点DOM 中还存在其他类型的节点。例如注释comments!DOCTYPE HTML html body The truth about elk. ol liAn elk is a smart/li !-- comment -- li...and cunning animal!/li /ol /body /html对应的 DOM 树中在两个文本节点之间出现了一种新的节点类型——注释节点标记为#comment。你可能会问注释不会影响页面的视觉呈现为什么也要放进 DOM规则就是只要出现在 HTML 里就必须出现在 DOM 树中。HTML 中的一切包括注释都会成为 DOM 的一部分。甚至文档最开头的!DOCTYPE...指令本身也是一个 DOM 节点它位于 DOM 树中html的正前方——这一点很少有人知道。我们一般不会去触碰它示意图里也常常不画它但它确实存在。代表整个文档的document对象形式上也是一个 DOM 节点。根据 WHATWG DOM 规范节点一共有 12 种类型但在实践中我们通常只用到其中 4 种document—— 进入 DOM 的入口点元素节点element nodes—— HTML 标签构建树的积木文本节点text nodes—— 包含文本内容注释comments—— 有时可以把信息写在这里页面不会显示但 JavaScript 可以从 DOM 中读取。亲手查看Live DOM Viewer 与浏览器开发者工具要实时查看 DOM 结构可以试试 Live DOM Viewer输入文档内容它会立刻以 DOM 的形式展示出来。另一种也是日常开发中最常用的探索 DOM 的方式是使用浏览器开发者工具。具体做法是打开本仓库中的示例页面 elk.html按 F12或等效方式开启浏览器开发者工具切换到Elements元素面板。该示例页面内容如下!DOCTYPE HTML html body The truth about elk. ol liAn elk is a smart/li !-- comment -- li...and cunning animal!/li /ol /body /html此时 Elements 面板应显示类似下面的 DOM 视图可以看到 DOM 节点、可以点击元素、查看它们的细节。仓库中的 elk.svg 正是该示例在 Elements 面板中的实际呈现截图。请注意开发者工具中的 DOM 结构是简化过的文本节点只显示为文本纯空白的文本节点完全不会出现。这没有问题因为大多数时候我们关心的都是元素节点。点击 Elements 面板左上角的选择元素按钮仓库中的样式资源 toolbarButtonGlyphs.svg 即用于绘制此类工具图标相关样式定义可查看 head.html就可以用鼠标或其他指针设备在网页上点选节点并在 Elements 面板中定位检查它。当页面很大、对应的 DOM 也很庞大时这个功能尤其好用。另一种更快的办法是在网页上右键选择上下文菜单中的检查Inspect如仓库中的 inspect.svg 所示。在开发者工具右侧还有若干子面板Styles样式—— 逐条查看当前元素应用到的 CSS 规则包括浏览器内置规则灰色显示几乎所有内容都可以就地编辑包括下方盒模型区域中元素的尺寸/外边距/内边距Computed计算样式—— 按属性查看元素实际生效的 CSS每个属性都能看到是哪条规则赋予它的包括 CSS 继承等Event Listeners事件监听器—— 查看绑定到 DOM 元素上的事件监听器教程的后续部分会讲到……等等。学习这些面板最好的方式就是动手点一点。大部分值都可以就地编辑。与控制台交互$0、$1 与 inspect()在处理 DOM 时我们常常还想对它应用 JavaScript拿到一个节点运行代码去修改它、查看结果。下面是一些在 Elements 面板和 Console控制台之间来回穿梭的技巧。起步步骤在 Elements 面板中选中第一个li按key:Esc—— 会在 Elements 面板正下方打开控制台。此时最后选中的元素在控制台中可用$0引用之前选中的是$1依此类推。我们可以对它们运行命令例如$0.style.background red会把选中的列表项变成红色效果如仓库中的 domconsole0.svg 所示。这就是从 Elements 拿节点到 Console 用的路径。反向路径同样存在如果有一个变量引用了某个 DOM 节点可以在控制台中执行inspect(node)让它显示在 Elements 面板中。也可以直接在控制台输出 DOM 节点并就地展开探索比如下面的document.body见仓库中的 domconsole1.svg。这些当然都是调试用途。从下一章开始我们会用 JavaScript 来访问和修改 DOM。浏览器开发者工具在开发中是极好的助手可以探索 DOM、尝试各种操作、观察哪里出了问题。总结浏览器把 HTML/XML 文档表示为一棵DOM 树标签变成元素节点构成树的结构文本变成文本节点……诸如此类HTML 中的一切在 DOM 中都有位置连注释也不例外。我们可以用开发者工具检查 DOM并手动修改它。这里覆盖了最基础、最常用也最重要的操作。关于 Chrome 开发者工具还有大量文档可供深入学习学习这些工具最好的方式就是到处点一点、读一读菜单——大多数选项的用途一目了然。等你对整体有了概念之后再查阅文档补齐其余细节即可。DOM 节点拥有大量属性和方法允许我们在它们之间穿梭、修改它们、在页面中移动等等。这些内容将在接下来的章节中逐一展开你可以直接从下一章 Walking the DOM 开始学习如何借助document、documentElement、document.body等入口在节点之间导航。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript教程深入理解DOM树结构JavaScript教程深入理解DOM树结构 你是否曾经好奇浏览器是如何将HTML代码转换为可视化的网页或者为什么JavaScript能够动态修改页面内容文档教程前端JavaScript教程深入理解DOM树结构JavaScript教程深入理解DOM树结构 什么是DOM树 DOM文档对象模型是HTML文档的编程接口它将HTML文档表示为一个由节点和对象组成的树文档/教程前端DataScript入门指南如何在浏览器中构建不可变数据库DataScript入门指南如何在浏览器中构建不可变数据库 DataScript是一个轻量级的不可变内存数据库和Datalog查询引擎专为Clojure、C数据库后端上一篇APK Installer 使用教程在 Windows 上安装安卓应用的完整指南下一篇Visual C 运行库 AIO 完整指南5 分钟一键装齐 2005 到 2022 全部版本创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考