第一百一十四节，JavaScript文档对象，DOM进阶

JavaScript文档对象，DOM进阶

学习要点：

1.DOM类型

2.DOM扩展

3.DOM操作内容

 

DOM自身存在很多类型，在DOM基础课程中大部分都有所接触，比如Element类型：表示的是元素节点，再比如Text类型：表示的是文本节点。DOM也提供了一些扩展功能。

 

一．DOM类型

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

DOM类型

类型名	说明
Node	表示所有类型值的统一接口，IE不支持
Document	表示文档类型
Element	表示元素节点类型
Text	表示文本节点类型
Comment	表示文档中的注释类型
CDATASection	表示CDATA区域类型
DocumentType	表示文档声明类型
DocumentFragment	表示文档片段类型
Attr	表示属性节点类型

 

1.Node类型，返回值表示Node类型的数值

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

 

Node的常量

常量名	说明	nodeType值
ELEMENT_NODE	元素	1
ATTRIBUTE_NODE	属性	2
TEXT_NODE	文本	3
CDATA_SECTION_NODE	CDATA	4
ENTITY_REFERENCE_NODE	实体参考	5
ENTITY_NODE	实体	6
PROCESSING_INSTRUCETION_NODE	处理指令	7
COMMENT_NODE	注释	8
DOCUMENT_NODE	文档根	9
DOCUMENT_TYPE_NODE	doctype,html文档声明类型	10
DOCUMENT_FRAGMENT_NODE	文档片段	11
NOTATION_NODE	符号	12

 

 

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

alert(Node.ELEMENT_NODE);                //1，元素节点类型值
alert(Node.TEXT_NODE);                    //2，文本节点类型值

注意：低版本ie不支持，下面会有解决方案

ELEMENT_NODE，表示元素节点返回值是1 ，实际使用方式如下

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    var asf = document.getElementById('box'); //通过ID获取到目标节点
    //判断元素节点的类型，如果等于文本类型
    if(asf.nodeType === Node.ELEMENT_NODE){  //ELEMENT_NODE，表示元素节点返回值是1
        alert("元素类型节点");
    }else {
        alert("不是元素类型节点")
    }
};

//元素类型节点

ps:其他属性使用方式相同

我们建议使用Node类型的属性来代替1,2这些阿拉伯数字，有可能大家会觉得这样岂不是很繁琐吗？并且还有一个问题就是IE不支持Node类型。
如果只有两个属性的话，用1，2来代替会特别方便，但如果属性特别多的情况下，1、2、3、4、5、6、7、8、9、10、11、12，你根本就分不清哪个数字代表的是哪个节点。当然，如果你只用1，2两个节点，那就另当别论了。

Node类型IE低版本不支持，我们可以模拟一个类，让IE也支持

alert(Node.ELEMENT_NODE);                //1，元素节点类型值
alert(Node.TEXT_NODE);                    //2，文本节点类型值

//Node类型IE低版本不支持，我们可以模拟一个类，让IE也支持
//判断Node的类型如果等于undefined，就说明此浏览器不支持Node类型
if (typeof Node === 'undefined'){
    //通过window创建一个对象全局变量
    window.Node ={
        ELEMENT_NODE:1,
        ATTRIBUTE_NODE:2,
        TEXT_NODE:3,
        CDATA_SECTION_NODE:4,
        ENTITY_REFERENCE_NODE:5,
        ENTITY_NODE:6,
        PROCESSING_INSTRUCETION_NODE:7,
        COMMENT_NODE:8,
        DOCUMENT_NODE:9,
        DOCUMENT_TYPE_NODE:10,
        DOCUMENT_FRAGMENT_NODE:11,
        NOTATION_NODE:12
    };
}

2.Document类型，返回根节点对象

document类型表示文档，或文档的根节点，而这个节点是隐藏的，没有具体的元素标签。也就是所有的html都是在这个节点下的，这个是根

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    alert(document);   //document类型表示文档，或文档的根节点
    //返回[object HTMLDocument],返回根节点对象

    alert(document.nodeType);  //查看文档类型值
    //返回9，表示文档根

    alert(document.childNodes[0]); //获取根元素节点里的第一个子节点
    //返回[object DocumentType]，第一个子节点对象

    alert(document.childNodes[0].nodeType); //查看第一个子节点的类型
    //返回10，表示html文档声明类型

    alert(document.childNodes[1]); //获取根元素节点里的第二个子节点
    //返回[object HTMLHtmlElement]，第二个子节点对象

    alert(document.childNodes[1].nodeType); //查看第二个子节点的类型
    //返回1，表示是元素类型也就是标签

    alert(document.childNodes[1].nodeName);  //获取第二个子节点的标签名称
    //HTML，表示是html标签
};

 

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

documentElement属性，直接获取根节点下的html节点，返回html节点对象

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    alert(document.documentElement);  //documentElement属性，直接获取根节点下的html节点，返回html节点对象
    //返回，[object HTMLHtmlElement] html节点对象

    alert(document.documentElement.nodeName); //获取html节点的标签名称
    //返回，HTML 标签名称
};

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

body属性，直接获取body标签节点

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    alert(document.body);  //body属性，直接获取body标签节点
    //返回：[object HTMLBodyElement] body标签节点对象

    alert(document.body.nodeName); //获取body标签名称
    //返回：BODY  标签名称
};

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

doctype属性，直接获取html文档声明标签节点
注意：ie7以下不支持，ie7以下只能通过父节点获取子节点得到，并且得到的是文档注释类型，不是元素类型

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

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    alert(document.doctype);  //doctype属性，直接获取html文档声明标签节点
    //返回：[object DocumentType] 文档声明标签节点对象
};

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

title属性，获取和设置