首页 > js学习 > js基础知识 > DOM进阶:DOM的类型
2016
12-16

DOM进阶:DOM的类型

DOM类型DOM基础课程中,我们了解了DOM的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型。

DOMd的类型名和说明:

Node:表示所有类型值的统一接口,IE不支持

Document:表示文档类型

Element:表示元素节点类型

Text:表示文本节点类型

Comment:表示文档中的注释类型

CDATASection:表示CDATA区域类型

DocumentType:表示文档声明类型

DocumentFragment:表示文档片段类型

Attr:表示属性节点类型

一.Node类型:Node接口是DOM1级就定义了,Node接口定义了12个数值常量以表示每个节点的类型值。除了IE之外,所有浏览器都可以访问这个类型。

ELEMENT_NODE:元素,nodeType值为1

ATTRIBUTE_NODE:属性,nodeType值为2

TEXT_NODE:文本,nodeType值为3

CDATA_SECTION_NODE:CDATA,nodeType值为4

ENTITY_REFERENCE_NODE:实体参考,nodeType值为5

ENTITY_NODE:实体,nodeType值为6

PROCESSING_INSTRUCETION_NODE:处理指令,nodeType值为7

COMMENT_NODE:注释,nodeType值为8

DOCUMENT_NODE:文档根,nodeType值为9

DOCUMENT_TYPE_NODE:doctype,nodeType值为10

DOCUMENT_FRAGMENT_NODE:文档片段,nodeType值为11

NOTATION_NODE:符号,nodeType值为12

虽然这里介绍了12种节点对象的属性,用的多的其实也就几个而已。

alert(Node.ELEMENT_NODE); //1,元素节点类型值

alert(Node.TEXT_NODE); //2,文本节点类型值

我们建议使用Node类型的属性来代替1,2这些阿拉伯数字,有可能大家会觉得这样岂不是很繁琐吗?并且还有一个问题就是IE不支持Node类型。

如果只有两个属性的话,用1,2来代替会特别方便,但如果属性特别多的情况下,1、2、3、4、5、6、7、8、9、10、11、12,你根本就分不清哪个数字代表的是哪个节点。当然,如果你只用1,2两个节点,那就另当别论了。

IE不支持,我们可以模拟一个类,让IE也支持。

if (typeof Node == 'undefined') {

window.Node = {ELEMENT_NODE : 1,TEXT_NODE : 3};

}

二.Document类型

Document类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签。

document; //document

document.nodeType; //9,类型值

document.childNodes[0]; //DocumentType,第一个子节点对象,一般为doctype节点

document.childNodes[0].nodeType; //非IE为10,IE为8

document.childNodes[1]; //HTMLHtmlElement,值为html节点

document.childNodes[1].nodeName; //HTML

如果想直接得到html标签的元素节点对象HTMLHtmlElement,不必使用childNodes属性这么麻烦,可以使用documentElement即可。

document.documentElement; //HTMLHtmlElement

在很多情况下,我们并不需要得到html标签的元素节点,而需要得到更常用的body标签,之前我们采用的是:document.getElementsByTagName('body')[0],那么这里提供一个更加简便的方法:document.body。

在html之前还有一个文档声明:!DOCTYPE会作为某些浏览器的第一个节点来处理,这里提供了一个简便方法来处理:document.doctype。

IE8中,如果使用子节点访问,IE8之前会解释为注释类型Comment节点,而document.doctype则会返回null。

在Document中有一些属性和对象合集,可以快速的帮助我们精确的处理一些任务。

属性:

document.title; //获取和设置title标签的值

document.URL; //获取URL路径

document.domain; //获取域名,服务器端

document.referrer; //获取上一个来源URL,服务器端

对象集合:

document.anchors; //获取文档中带name属性的a元素集合

document.links; //获取文档中带href属性的a元素集合

document.forms; //获取文档中form元素集合

document.images; //获取文档中img元素集合

三.Element类型

Element类型用于表现HTML中的元素节点。在DOM基础那章,我们已经可以对元素节点进行查找、创建等操作,元素节点的nodeType为1,nodeName为元素的标签名。

元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型。

HTML:HTMLHtmlElement

DIV:HTMLDivElement

BODY:HTMLBodyElement

P:HTMLParamElement

以上给出了部分对应,更多的元素对应类型,直接访问调用即可。

四.Text类型

Text类型用于表现文本节点类型,文本不包含HTML,或包含转义后的HTML。文本节点的nodeType为3。

在同时创建两个同一级别的文本节点的时候,会产生分离的两个节点。

var box = document.createElement('div');

var text = document.createTextNode('Mr.');

var text2 = document.createTextNode(Lee!);

box.appendChild(text);

box.appendChild(text2);

document.body.appendChild(box);

alert(box.childNodes.length); //2,两个文本节点

把两个同邻的文本节点合并在一起使用normalize()方法即可。

box.normalize(); //合并成一个节点

有合并就有分离,通过splitText(num)即可实现节点分离。

box.firstChild.splitText(3); //分离一个节点

除了上面的两种方法外,Text还提供了一些别的DOM操作的方法如下:

var box = document.getElementById('box');

box.firstChild.deleteData(0,2); //删除从0位置的2个字符

box.firstChild.insertData(0,'Hello.'); //从0位置添加指定字符

box.firstChild.replaceData(0,2,'Miss'); //从0位置替换掉2个指定字符

box.firstChild.substringData(0,2); //从0位置获取2个字符,直接输出

alert(box.firstChild.nodeValue); //输出结果

五.Comment类型

Comment类型表示文档中的注释。nodeType是8,nodeName是#comment,nodeValue是注释的内容。

var box = document.getElementById('box');

alert(box.firstChild); //Comment

PS:在IE中,注释节点可以使用!当作元素来访问。

var comment = document.getElementsByTagName('!');

alert(comment.length);

六.Attr类型

Attr类型表示文档元素中的属性。nodeType为11,nodeName为属性名,nodeValue为属性值。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。