DOM、HTML DOM、XML DOM关系的深度解析

32 篇文章 0 订阅
2 篇文章 0 订阅

首先讲一讲DOM是什么。

W3C(万维网联盟)定义了访问 HTML 和 XML 文档的标准—DOM。

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。

DOM

“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

DOM定义了HTML文档和XML文档的逻辑结构(DOM树),给出了一种访问和处理这两种文档的方法。

文档代表的是数据,而DOM则代表了如何去处理这些数据

W3C DOM 标准被分为 3 个不同的部分:

  • Core Dom :核心Dom,针对任何结构化文档的标准模型

  • XML DOM:用于XML文档的标准模型,对XML元素进行操作

  • HTML DOM: 用于HTML文档的标准模型,对HTML元素进行操作。

Core Dom是结构化文档比较底层对象的集合,这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。

HTML DOM和XML DOM两部分则是专为操作具体HTML文档和XML文档所提供的方法。

DOM树

DOM树定义了XML或HTML的逻辑结构。

有以下常见的最常见的节点类型:

  • 元素:元素可以有其他元素、文本节点或两者兼有来作为其子节点。

  • 属性:属性节点包含关于元素节点的信息。

  • 文本:确切来讲,文本节点是文本。它可以包含许多信息或为空。

  • 文档(根节点) :文档节点是整个文档中所有其他节点的父节点。

较不常见的节点类型:注释、处理指令等。

HTML DOM树:

一个html文档及其对应的html DOM 树如下:

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
</head>
<body>
<h1>正文</h1>
<p>内容</p>
</body>
</html>

这里写图片描述

XML DOM树:

一个xml文档及其对应的xml DOM树如下:


<?xml version="1.0" encoding="utf-8"?>

<bookstore>
    <book category="children">
          <title lang="en">Harry Potter</title> 
          <author>J K. Rowling</author> 
          <year>2005</year> 
          <price>29.99</price> 
    </book>

    <book category="cooking">
          <title lang="en">Everyday Italian</title> 
          <author>Giada De Laurentiis</author> 
          <year>2005</year> 
          <price>30.00</price> 
    </book>

    <book category="web">
          <title lang="en">Learning XML</title> 
          <author>Erik T. Ray</author> 
          <year>2003</year> 
          <price>39.95</price> 
    </book>
    <book category="web">
          <title lang="en">XQuery Kick Start</title> 
          <author>James McGovern</author> 
          <author>Per Bothner</author> 
          <author>Kurt Cagle</author> 
          <author>James Linn</author> 
         <author>Vaidyanathan Nagarajan</author> 
          <year>2003</year> 
          <price>49.99</price> 
    </book>

这里写图片描述

DOM的四个基本接口

在DOM接口规范中,有四个基本的接口:Document, Node, NodeList, NamedNodeMap

Document
Document接口是对文档进行操作的入口,它是从Node接口继承过来的。

Node
Node接口是其他大多数接口的父类。在DOM树中,Node接口代表了树中的一个节点。

NodeList
NodeList接口是一个节点的集合,它包含了某个节点中的所有子节点。它提供了对节点集合的抽象定义,并不包含如何实现这个节点集的定义。NodeList用于表示有顺序关系的一组节点,比如某个节点的子节点序列。在DOM中,NodeList的对象是live的,对文档的改变,会直接反映到相关的NodeList对象中。

NamedNodeMap

NamedNodeMap接口也是一个节点的集合,通过该接口,可以建立节点名和节点之间的一一映射关系,从而利用节点名可以直接访问特定的节点,这个接口主要用在属性节点的表示上。尽管NamedNodeMap所包含的节点可以通过索引来进行访问,但是这只是提供了一种枚举方法,NamedNodeMap所包含的节点集中节点是无序的。与NodeList相同,在DOM中,NamedNodeMap对象也是live的。

结束

简单的说,dom core所定义的方法既可以操作html dom 也可以操作xml dom, 它提供了一些底层的接口,在这个基础上html dom 和xml dom 分别具有一些专属的方法。至于html dom 和 xml dom 有什么区别,可自行了解,这里不作赘述。

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值