之前学习DOM基础知识时了解了DOM的节点和怎样查询和操作节点，但是本身这些不同的节点，又有着不同的类型。

一、DOM类型

1、Document类型

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

window.onload=function(){
    alert(document);                        //[object HTMLDocument]
    alert(document.nodeType);               //9，代表文档根DOCUMENT_NODE
    alert(document.nodeValue);              //null
    alert(document.nodeName);               //#document
    alert(document.childNodes[0]);          //[object DocumentType],
    alert(document.childNodes[0].nodeType); //10,代表DOCUMENT_TYPE_NODE
    alert(document.childNodes[0].nodeName); //html
    alert(document.childNodes[1]);          //[object HTMLHtmlElement]
    alert(document.childNodes[1].nodeName); //HTML
}

但是不同浏览器的不同版本会存在差异，尤其是IE的低版本。

2、Text类型

Text类型用于表现文本节点类型，文本不包含HTML，或包含转义后的HTML。文本节点的nodeType为3。Text提供了一些DOM操作的方法，

在同时创建两个同一级别的文本节点的时候，会产生分离的两个节点，使用normalize()将两个同邻的文本节点合并在一起，

window.onload=function(){
    var demo=document.getElementById("test");
    var text1=document.createTextNode("Mr.");
    var text2=document.createTextNode("Bert");
    demo.appendChild(text1);
    demo.appendChild(text2);
    
    demo.normalize();

    alert(demo.childNodes[0].nodeValue);
}

在合并之后，只有一个文本节点，其长度只有1，只能childNodes[0]。

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

<div id="test">Mr.bert</div>

window.onload=function(){
    var demo=document.getElementById("test");
    demo.childNodes[0].splitText(3);    //把前三个字符分离成新节点
    alert(demo.childNodes[0].nodeValue);    //输出Mr.
}

二、DMO扩展

1、IE呈现模式

从IE6开始开始区分标准模式和混杂模式(怪异模式)，主要是看文档的声明。IE中compatMode属性可识别浏览器的文档处于什么模式。如果是标准模式，则返回CSS1Compat，如果是混杂模式则返回BackCompat。这可应用于查看可视区宽度，对IE不同版本做兼容处理，

window.onload=function(){
    if(document.compatMode=="CSS1Compat"){
        alert(document.documentElement.clientWidth);
    }else{
        alert(document.body.clientWidth);
    }
}

2、scrollIntoView()，滚动

DOM提供了一些滚动页面的方法，

window.onload=function(){
    document.getElementById("test").scrollIntoView();
}

设置id为test的元素在不可视区域，通过上述代码可以实现test元素滚动到可视区域。试验发现，chrome浏览器在刚打开时候会有如期效果，在页面上刷新时没有是效果的，而IE则可以手动将test元素滚动到不可视区域后再刷新也能有如期效果。

3、children属性

之前有谈到空白字符的问题，会导致不同浏览器解析的子节点长度不一。使用children属性得到有效子节点，过滤掉空白节点，但这是非标准属性。

    <div id="test">
        <p>测试1</p>
        <p>测试2</p>
        <p>测试3</p>
    </div>

window.onload=function(){
    var demo=document.getElementById("test");
    alert(demo.children.length);    //3
    alert(demo.childNodes.length);  //7
}

4、contains()方法

可判断一个节点是不是另一个节点的后代，

<div id="test"><p>测试</p></div>

window.onload=function(){
    var test=document.getElementById("test");
    var p=test.firstChild;
    alert(test.contains(p));    //true
}

有很多低版本的浏览器不支持这个属性，火狐浏览器旧版本3.6以下不支持，Safari3.0以下版本不支持，因此需要做兼容处理，

function contains(refNode, otherNode) {
	if (typeof refNode.contains != 'undefined' && !(BrowserDetect.browser == 'Safari' && BrowserDetect.version < 3)) {
		return refNode.contains(otherNode);
	} else if (typeof refNode.compareDocumentPosition == 'function') {
		return refNode.compareDocumentPosition(otherNode) > 16;
	} else {
		var node = otherNode.parentNode;
		do {
			if (node === refNode) {
				return true;
			} else {
				node = otherNode.parentNode;
			}
		} while (node != null)
		return false;
	}
}

同样，此处也需要引入browserdetect.js文件的。