本文详细介绍了DOM的各个类型，包括Node、Document、Element、Text、Comment和Attr，强调了它们的特点和常见用途。此外，还探讨了DOM的扩展特性，如呈现模式、滚动操作、children属性、contains()方法及其兼容性处理，以及innerText、innerHTML、outerText和outerHTML等属性的使用和注意事项。内容深入浅出，适合JavaScript和Web前端开发者阅读。
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
最低0.47元/天 解锁文章
1780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
