DOM系列:DOM树和遍历DOM

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

DOM树

众所周之,HTML文档的主干就是标记(也就是大家熟悉的HTML标签元素)。

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

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

上图是一个家族族谱的图。其中TossicoAkikazuHitomiTakemi是祖父母。而Toshiakijuliana是父母。另外TKYujiBrunoKaio是父母的孩子(其实也是我的兄弟姐妹们)。

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

而在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)。

treefirst 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

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

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