DOM系列：DOM树和遍历DOM

作者：大漠 日期：2018-05-22 点击：3740
JavaScript
DOM
DOM系列
会员专栏

特别声明：小站对部分原创文章已开启付费阅读，并开通年费VIP通道，年费价格为 ¥365.00元。如果您喜欢小站的内容，可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!(^_^)

上一节，咱们整理了DOM系列中的第一篇，主要介绍浏览器与DOM相关的知识。从标题中我们可以看出来，今天所要学的东西包含两个部分，第一部分是DOM树，第二部分是遍历DOM。如果你和我一样对于DOM树和遍历DOM是初次接触，那个人建议您花点时间好好看看这两部分的知识。

DOM树

众所周之，HTML文档的主干就是标记（也就是大家熟悉的HTML标签元素）。

根据文档对象模型（即：DOM），每个HTML标签事实上都是一个对象。嵌套的标签被称为之元素（或子标签）。除此之外，标签内的文本也是一个对象。而这些对象都可以使用JavaScript访问。

那么啥是DOM树呢？我们先来看看现实生活中的例子。想象一棵与所有世代有关系的家庭树（大家熟知的族谱），其包括了：祖父母、父母、孩子、兄弟姐妹等等。我们通常以等级的方式组织豪庭树（族谱）。

上图是一个家族族谱的图。其中Tossico、Akikazu、Hitomi和Takemi是祖父母。而Toshiaki和juliana是父母。另外TK、Yuji、Bruno和Kaio是父母的孩子（其实也是我的兄弟姐妹们）。

除了家族族谱之外，生活中还有另一个示例，那就是一个组织的结构层次，比如：

而在HTML中，DOM其实也类似一棵树的，它和前面所举例的家族族谱，组织机构图是类似的，HTML中DOM就是一棵树。

DOM的一个示例

我们来看一个DOM的示例，比如下面这样的一个HTML文档：

<!DOCTYPE HTML>
<html>
    <head>
        <title>About elks</title>
    </head>
    <body>
        The truth about elks.
    </body>
</html>

DOM将HMTML表示为标记的树结构（也就是大家所说的DOM树），就如下面这样的样子：

在上面的图中，你可以单击元素的节点，它们的子节点可以展开或者收缩，如下图所示：

HTML的标签被称为元素（element）节点（或只是元素）。嵌套标签成为一个子元素（也被称为子）。因此，对于一个HTML文档而言，<html>是一个根节点（也被称为根元素）,然后<head>和<body>是<html>的子元素。

元素内的文本被称这文本节点，标记为#text。文本节点仅包含一个字符串。它可能没有子元素，也就是说它永远只是树的叶子（没有成为树枝的可能）。

除此之外，要注意文本节点中的两个特殊字符：

  • 换行符：↵（对应JavaScript中的\n）
  • 空白符：␣

空格和换行符是完全有效的字符，它们形成文本节点并成为DOM的一部分。因此，例如在<head>标签之上的示例中，在<title>这前包含了一些空格，并且该文本成为一个#text节点（它只包含一条换行符和一些空格）。

不过要注意的是，有两个将会除外：

  • 在<head>标签之前的空格和换行符由于历史原因将被忽略
  • 如果我们将一些东西放在</body>之后，那么它就会自动地移到</body>的前面，正如HTML规范要求的一样，所有内容必须在</body>中一样。因此，在</body>之后可能没有空格

在其他情况之下，一切都很简单。如果文档中有空格（就像任何字符一样），那么它们就会成为DOM中的文本节点，如果我们删除它们，那么就不会有任何东西，也不再会有空格符或换行符的节点。

比如下面这个示例：

<!DOCTYPE HTML>
<html><head><title>About elks</title></head><body>The truth about elks.</body></html>

上面的HTML结构对应的DOM树如下图所示：

相比上面的截图可以看出来，没有了空格符和换行符的文本节点。

通过上面的示例，可能你对DOM树有一定的了解了。但对一些一技术的定义估计还不是非常的了解，接下来花点时间来说一下DOM中的一些技术定义。

DOM中的技术定义

DOM树(tree)是一个DOM节点(nodes)的集合（拿到生活中来说，树是称为节眯的实体集合）。而其中节点由边（edges）连接。每个节点（node）都包含一个值（value）或数据（data），它可能或有可能没有子节点（child node）。

tree的first node称为root节点。如果root节点由另一个节点连接，则root节点是父节点，连接的节点是子节点。

所有的树节点（Tree nodes）都被edges连接在一起。它是树（trees）的重要组成部分，因为它管理节点（nodes）之间的关系。

对于一棵树而言，叶子（leaes）是树（tree）上的最后一个节点（nodes）。它们是没有子节点。就像真正的树一样，DOM也是有根（root）、枝（Element）和叶子（文本节点）。

除此之外，其他还需要理解的重要概念是高度（height）和深度（depth）。树的高度是叶子最长路径的长度；节点的深度是路径到其根的长度。用下图来阐述会更形象一些：

简单的总结一些术语：

  • root（根节点）是树（tree）最顶端的节点
剩余80%内容付费后可查看
* 请输入阅读码（忘记阅读码？）

如需转载，烦请注明出处：https://www.w3cplus.com/javascript/dom-tree-and-traversals.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部