htm Dom对象与 Xml Dom对象的理解

2022-09-07 18:13:29

html 是基于Xml的文档规范。是一种特殊的xml文档，这一点很重要

1.xml 文档的操作，java，c#,...各种语言都提供了很好的api对文档进行解析，操作。当然js 也不例外，提供了一系列的方法。

具体的方法，w3c 上都有讲解。Document,Node, ElementNode,TextNode,AttributeNode，CommentNode,NodeList 这些都是xml的属性

xml 里面每个节点都是一个node对象，

2.html 是一种特殊的xml文档，那么特殊的地方在哪？

1) html 封装好了一系列的对象，比如 image,Table,Form,Input,Select...等等

我们可以用new Image() 这种方式去创建对象

html 里每个节点都是element对象，

2) html dom 提供了更方便的方法去访问节点， xxx.className, xxxx.id 等等，

在标准的xml 文档中，应该用getAtrribute() 去访问。当然htm dom 也可以用这种方式去访问，因为它是xml

3.在加载html时，浏览器会创建全局的window对象，然后下载html文档，创建document对象，并把这个document对象赋值给全局的window对象。

这里创建的document 是 HTMLDocument ， HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。在新的规范中

html中的元素都是htmlelment对象，HTMLElement 对象继承了 Node 和 Element 对象的标准属性。意思就是 span div这些节点可以使用node对象和element对象的方法

xml dom 与htm dom 在用途上相互补充，

4.tips

document.getElmentsByTagName 返回的是动态的Nodelist ，document.querySeletorAll() 返回的是静态的Nodelist

Nodelist 是xml dom 属性，以上二个方法也属于Xml Dom。

动态是指：

HTMLCollection、NodeList以及NamedNodeMap这三个集合都是“动态的”，每当文档发生变化时，他们都会更新。他们将始终保持这最新、最准确的消息。且看以下程序：

var divs = document.getElementsByTagName("div"),

div;

for (i = 0; i < divs.length; i++) {

div = document.createElement("div");

document.body.appendChild(div);

}

以上代码是个死循环！

另外htmlcollections ，是返回一些htmlelement集合，比如获取select 下面option， form 下面的表单元素等。

5.htmelement 都有nodetype属性，如下

window.Node 有个全局的函数，里面包含了全部NodeType 静态值

相信有了以上的指导思想，在理解很多方法，模型上很有帮助

码农公寓