您的位置:首页> 前端教程> HTML教程
文章导航

DOM文档树介绍

2018-9-11 11:20| 作者: admin| 查看: 1594| 评论: 0|来自: 蚂蚁部落

不少前端文章中都有dom tree(也就是文档树)概念的涉及。

下面再结合图示简单介绍一下。

DOM解析:

DOM是Document Object Model(文档对象模型)的缩写。

它定义HTML文档或者XML文档的逻辑结构或者编程接口。

文档逻辑结构:

它面向对象的方式来描述对象模型,它将文档建模为一个对象,以树状的结构组织(树中的对象称为“节点”)。

文档包含1个document节点,0个或1个doctype节点以及0个或多个元素节点等。document节点是文档树根节点。

如对于HTML文档,DOM 是这样规定的:

(1).整个文档是一个文档节点。

(2).每个 HTML 标签是一个元素节点。

(3).包含在 HTML 元素中的文本是文本节点。

(4).每一个 HTML 属性是一个属性节点。

(6).注释属于注释节点。

节点之间有层次关系,如下代码:

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>文档标题</title>
</head>
<body>
<a href="">我的链接</a>
<h1>我的标题</h1>
</body>
</html>

会被建模为下面的文档树:

a:3:{s:3:\"pic\";s:43:\"portal/201809/11/112105f23uj2yy7q03nn7y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

又如下面的html文档:

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html class=e>
 <head><title>Aliens?</title></head>
 <body>Why yes.</body>
</html>

a:3:{s:3:\"pic\";s:43:\"portal/201809/11/112111hhc4e4q7x9gztr86.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部