DOM进阶
DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元素节点,再比如Text类型:表示的是文本节点。DOM也提供了一些扩展功能。
一.DOM类型
DOM基础课程中,我们了解了DOM的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型。
DOM类型
1.Node类型
Node接口是DOM1级就定义了,Node接口定义了12个数值常量以表示每个节点的类型值。除了IE之外,所有浏览器都可以访问这个类型。
Node的常量
虽然这里介绍了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') { //IE返回
window.Node = {
ELEMENT_NODE : 1,
TEXT_NODE : 3
};
}
2.Document类型
Document类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签。
document;//document
document.nodeType;//9,类型值
document.childNodes[0];//DocumentType,第一个子节点对象
document.childNodes[0].nodeType;//非IE为10,IE为8
document.childNodes[1];//HTMLHtmlElement
document.childNodes[1].nodeName;//HTML
如果想直接得到<html>标签的元素节点对象HTMLHtmlElement,不必使用childNodes属性这么麻烦,可以使用documentElement即可。
document.documentElement;//HTMLHtmlElement