DOM对象的层次

太过爱你忘了你带给我的痛 2022-05-12 00:14 145阅读 0赞

**一 介绍**

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

**二 代码**

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

**三 运行结果**

### 三号标题 ###

**加粗内容**

**四 文档的层次结构**

**![acddbad7-3c4b-319b-9135-e3e4cc7e1c64.png][]  
 **

**五 概念介绍**

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属性等等。一般情况下，大部分属性节点都是隐藏在浏览器背后，并且是不可见的。属性节点总是被包含于元素节点当中。

[acddbad7-3c4b-319b-9135-e3e4cc7e1c64.png]: /images/20220512/a15c959d29c54d8a8dd3a08487d1ef72.png

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML Dom对象

什么是 DOM？ DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： > "W3C 文档对象模型（DOM）是中立于平

本是古典何须时尚/ 2023年01月03日 15:29/ 0 赞/ 190 阅读

相关 DOM--对象

原文网址：[DOM--对象\_IT利刃出鞘的博客-CSDN博客][DOM--_IT_-CSDN] 其他网址 > [HTML DOM 对象 | w2school][HTM

约定不等于承诺〃/ 2022年12月21日 03:29/ 0 赞/ 196 阅读

相关你真的知道DOM吗?（上）----(节点层次，DOM集合，Node类型）

文章目录前言正文节点层次 HTMLCollection和NodeList Node类型 no

╰+攻爆jí腚メ/ 2022年12月10日 14:58/ 0 赞/ 161 阅读

相关 DOM对象

文章目录一、DOM对象模型 1. 什么是DOM？ 2.Node节点 3.访问元素属性二、练习提示：以下是本篇文

小鱼儿/ 2022年11月19日 04:12/ 0 赞/ 197 阅读

相关对象的深层次获取

故心故心故心故心小故冲啊 -------------------- 文章目录 -------------------- 在写代码的时候遇到一个问题，在访问一个对象嵌

Love The Way You Lie/ 2022年11月06日 07:55/ 0 赞/ 134 阅读

相关 JavaScript DOM对象

JavaScript DOM对象 DOM简介 1、HTML DOM 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model

朴灿烈づ我的快乐病毒、/ 2022年06月15日 09:20/ 0 赞/ 210 阅读

相关的DOM对象

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生

秒速五厘米/ 2022年06月10日 08:56/ 0 赞/ 205 阅读

相关 DOM简介，DOM树简介，获取元素节点对象； DOM对象的常见的元素属性

13 DOM简介：DOM(Document Object Model)文档对象模型文档指的是：标记型文档（HTML等） DOM 是将标记型的文档中内容（标签，文本，属

一时失言乱红尘/ 2022年06月06日 03:13/ 0 赞/ 275 阅读

相关 DOM对象、js对象、jQuery对象的区别

DOM对象和js对象以及jQuery对象的区别一、DOM对象文档对象模型简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。 1. DOM实际上是以

Dear 丶/ 2022年05月15日 08:27/ 0 赞/ 322 阅读

相关 DOM对象的层次

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

太过爱你忘了你带给我的痛/ 2022年05月12日 00:14/ 0 赞/ 146 阅读