JavaScript中的DOM导航

‍ 个人主页：《爱蹦跶的大A阿》

当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        在我们的日常生活中，JavaScript已经成为了一种无处不在的编程语言。它的应用范围从简单的网页动画，到复杂的前端框架，再到后端的Node.js，甚至还包括物联网设备。然而，JavaScript并非一成不变，它一直在发展，一直在添加新的特性和功能。今天，我们将探讨JavaScript中的一个重要的概念：DOM导航。在这篇文章中，我们将详细介绍DOM导航，包括它的定义、使用方法，以及如何在不支持DOM导航的浏览器中进行polyfill。

​

✨ 正文

DOM树

        浏览器将HTML表示为标签的树形结构，这就是DOM树。在DOM树中，每个HTML标签都是一个对象，嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。所有这些对象都可以通过JavaScript来访问，我们可以使用它们来修改页面。例如，document.body是表示标签的对象。

document.body.style.background = 'red'; 
setTimeout(() => document.body.style.background = '', 3000);

        在这里，我们使用了style.background来修改document.body的背景颜色，但是还有很多其他的属性，例如：innerHTML——节点的HTML内容，offsetWidth——节点宽度（以像素度量）等。

这里是一张描述对象间链接的图片，通过这些链接我们可以在 DOM 节点之间移动。

 

DOM的例子

让我们从下面这个简单的文档（document）开始：

The truth about elk.

DOM将HTML表示为标签的树形结构。它看起来如下所示：

        在上面的图片中，你可以点击元素（element）节点，它们的子节点会打开/折叠。每个树的节点都是一个对象。标签被称为元素节点（或者仅仅是元素），并形成了树状结构：在根节点，和是其子项，等。元素内的文本形成文本节点，被标记为＃text。一个文本节点只包含一个字符串。它没有子项，并且总是树的叶子。例如，