HTML DOM 和 XML DOM

来源:互联网 发布:叶子流量卡淘宝店地址 编辑:程序博客网 时间:2024/05/22 03:49

【1】DOM

DOM 是 W3C(万维网联盟)的标准。
DOM 是 Document Object Model(文档对象模型)的缩写。

DOM 定义了访问 HTML 和 XML 文档的标准:

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

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

核心 DOM - 针对任何结构化文档的标准模型XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型

【2】HTML DOM

HTML DOM 是:

HTML 的标准对象模型HTML 的标准编程接口W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。

换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。


【HTML DOM Document 对象】

每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

HTMLDocument 接口对 DOM Document 接口进行了扩展,定义 HTML 专用的属性和方法。

很多属性和方法都是 HTMLCollection 对象HTMLCollection对象(实际上是可以用数组或名称索引的只读数组),其中保存了对锚、表单、链接以及其他可脚本元素的引用。

这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代,但是仍然常常使用,因为他们很方便。

write() 方法值得注意,在文档载入和解析的时候,它允许一个脚本向文档中插入动态生成的内容。

注意,在 1 级 DOM 中,HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中,该方法已经被转移到了 Document 接口,它现在由 HTMLDocument 继承而不是由它定义了。

Document对象的属性和方法参考Document对象


【DOM 节点】

在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

整个文档是一个文档节点每个 HTML 元素是元素节点**HTML 元素内的文本是文本节点**每个 HTML 属性是属性节点注释是注释节点

【访问 HTML 元素(节点)】

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素:

通过使用 getElementById() 方法通过使用 getElementsByTagName() 方法通过使用 getElementsByClassName() 方法

【DOM 节点树】

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:

这里写图片描述

通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。


【DOM对象方法】

这里写图片描述


【Element对象】

在 HTML DOM 中,Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点。

Element对象的属性和方法参考Element对象

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或改变任意 HTML 元素,包括 <html> 和 <body>。

nodeName 属性

nodeName 属性规定节点的名称。
nodeName 是只读的

元素节点的 nodeName 与标签名相同属性节点的 nodeName 与属性名相同文本节点的 nodeName 始终是 #text文档节点的 nodeName 始终是 #document

注释:nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefinednull文本节点的 nodeValue 是文本本身属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有:

这里写图片描述

节点<html> 的NodeType为10

这里写图片描述


【Attr 对象】

在 HTML DOM 中,Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。


【NamedNodeMap 对象】

在 HTML DOM 中,NamedNodeMap 对象表示元素属性节点的无序集合。
NamedNodeMap 中的节点可通过名称或索引(数字)来访问。

下图的属性或方法均可应用于HTML ELement对象:

这里写图片描述


【3】XML DOM

XML DOM 定义了访问和处理 XML 文档的标准方法。

XML DOM 是 XML Document Object Model 的缩写,即 XML 文档对象模型

【什么是 XML DOM】
XML DOM 是:

用于 XML 的标准对象模型用于 XML 的标准编程接口中立于平台和语言W3C 的标准

XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法(接口)。

换句话说:

XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

同HTML DOM类似,XML DOM 也存在节点树概念,具体参考XML DOM节点树

XML DOM节点树的遍历与获取与HTML DOM类型,具体参考XML DOM节点属性和方法

【Document 对象】

Document 对象是一棵文档树的根,可为我们提供对文档数据的最初(或最顶层)的访问入口。

用于元素节点、文本节点、注释、处理指令等均无法存在于 document 之外,document 对象同样提供了创建这些对象的方法。Node 对象提供了一个 ownerDocument 属性,此属性可把它们与在其中创建它们的 Document 关联起来。

【Element 对象】

Element 对象表示 XML 文档中的元素。元素可包含属性、其他元素或文本。如果元素含有文本,则在文本节点中表示该文本。

重要事项:文本永远存储在文本节点中。在 DOM 处理过程中的一个常见的错误是,导航到元素节点,并认为此节点含有文本。不过,即使最简单的元素节点之下也拥有文本节点。

举例,在 <year>2005</year> 中,有一个元素节点(year),同时此节点之下存在一个文本节点,其中含有文本(2005)。

由于元素对象也是一种节点,因此它可继承 Node 对象的属性和方法。

【XML的加载与解析】

大多数浏览器都内建了供读取和操作 XML 的 XML 解析器。
解析器把 XML 转换为 JavaScript 可存取的XML DOM对象。

具体参考XML的加载与解析

除了加载解析方式不同,HTML DOM 与XML DOM在操作元素节点上并无较大差异。

原创粉丝点击