DOM对象的层次

最新推荐文章于 2023-01-20 15:50:44 发布

chengqiuming

最新推荐文章于 2023-01-20 15:50:44 发布

阅读量2.8k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/chengqiuming/article/details/70140262

版权

166 篇文章 1 订阅

订阅专栏

一介绍

文档对象模型采用的分层结构为树形结构，以树节点的方式表示文档中的各种内容。先以一个简单的HTML文档说明一下。

二代码

<html >
<head>
<title>标题内容</title>
</head>
<body>
<h3>三号标题</h3>
<b>加粗内容</b>
</body>
</html>

三运行结果

加粗内容

四文档的层次结构

五概念介绍

1、根节点

在最顶层的<html>节点，称为根节点。

2、父节点

一个节点之上的节点是该节点的父节点(parent)。例如，<html>是<head>和<body>的父节点，<head>是<title>的父节点。

3、子节点

位于一个节点之下的节点就是该节点的子节点。例如，<head>和<body>是<html>的子节点，<title>是<head>的子节点。

4、兄弟节点

如果多个节点在同一个层次，并拥有着相同的父节点，这几个节点就是兄弟节点(sibling)。例如，<head>和<body>是兄弟节点，<h3>和<b>也是兄弟节点。

5、后代

一个节点的子节点的结合可以称为是该节点的后代(descendant)。例如，<head>和<body>是<html>的后代，<h3>和<b>是<body>的后代。

6、叶子节点

在树形结构最底部的节点称为叶子节点。例如，“标题内容”、“3号标题”和“加粗内容”都是叶子节点。

六、文档对象模型中节点的3种类型

元素节点：在HTML中，<body>、<p>、<a>等一系列标记，是这个文档的元素节点。元素节点组成了文档对象模型的语义逻辑结构。

文本节点：包含在元素节点中的内容部分，如<p>标签中的文本等等。一般情况下，不为空的文本节点都是可见并呈现于浏览器中的。

属性节点：元素节点的属性，如<a>标签的href属性与title属性等等。一般情况下，大部分属性节点都是隐藏在浏览器背后，并且是不可见的。属性节点总是被包含于元素节点当中。

关注

专栏目录