【DOM】node类型

本文章所有代码及其内容来自《javascript高级程序设计》，感兴趣的朋友可以购买纸质图书。

—————————————————————————————
DOM可以将任何HTML或Xml文档描述成一个由多层节点构成的结构。
. 节点分为几种类型，每种类型分别表示文档中不同的信息及标记。
. 每个节点都拥有各自的特点、数据和方法，与其他节点也存在某种关系
. 节点之间的关系构成层次，而所有的页面标记则表现为一个特定节点为跟节点的树形结构

Node

DOM1定义了一个Node接口，该接口将DOM中的所有节点类型实现。Node接口在js中是作为node类型实现，除IE外，所有浏览器都可以访问到这个类型，js中的所有节点类型都继承自node类型。
* 每个节点都有一个nodeType属性来表名节点的类型。

• Node.ELEMENT_NODE(1)
• Node.ATTRIBUTE_NODE(2)
• Node.TEXT_NODE(3)
• Node.ENTITY_NODE(6)
• Node.COMMENT_NODE(8)
• Node.DOCUMENT_NODE(9)

确定节点类型
方法一：

if(someNode.nodeType == Node.ELEMENT_NODE){  //在IE中无效
    alert("node is an element");
}

因为IE没有公开Node类型的构造函数，因此尚敏的代码在IE中会导致错误
方法二

if(someNode.nodeType == 1){  //任何浏览器都适用
    alert("node is an element");
}

1 > nodeValue 和 nodeName属性

if(someNode.nodeType == 1){
    value = someNode.nodeType;
}

在上面代码中需要考虑nodeType是否为element,因为element的nodeName始终都是元素的标签名，而nodeValue为null.

2> 节点关系
每个节点都有ChildNodes属性，其中保存一个NodeList对象。NodeList对象是一个类数组对象，用来保存一组有序的节点；基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反应在NodeList对象中。

    var firstChild = someNode.childNodes[0];
    var secondChild = someNode.childNodes.item(1);
    var count = someNode.childNodes.length();

将NodeList对象转换为数组

//在IE8及之前的版本中无效
 var arrofNodes = Array.prototype.slice.call(someNode.childNodes,0);

//在所有浏览器中适用
function convertToArray(nodes){
    var array = null;
    try{
    array = Array.prototype.slice.call(someNode.childNOdes,0);
    }catch(ex){
        array = new Array();
        for(var i=0, len=nodes.length; i<len; i++){
            array.push(nodes[i]);
        }
    }
}

parentNode 父节点
previousSibling 上一个的兄弟
nextSibling 下一个兄弟

. 如果列表中只有一个节点，那么该节点的previousSibling和nextSibling均为空。
. 如果ChildNodes为空，即没有子节点，则previousSibling和nextSibling均为空。

hasChildNodes() 在节点包含一或多个子节点的情况下返回true;
ownerDocument()指向表示整个文档的文档节点。
————————————————————————————————————

3> 操作节点
3.1 appendChild

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode);
alert(reutrnedNode == newNode);

3.2 insertBefore
insertBefore(newNode,nextSiblings);

//插入后成为第一个节点
var returnNode = someNode.insertBefore(newNode,someNode.firstChild);
//插入后成为最后一个节点
var returnNode = someNode.insertBefore(newNode,someNode.lastChild);
//插入后成为倒数第二个节点
var  returnNode = someNode.insertBefore(newNode,someNode.childNodes.length()-2);

3.3 replaceChild()

//替换第一个节点
var returnNode = someNode.replaceChild(newNode,someNode.firstChild);

3.4 removeChild()

//移除最后一个节点
var former = someNode.removeChild(someNode.lastChild);

3.5 cloneNode(参数)
参数为布尔值,表示是否执行深复制。
true: 深复制– 复制节点及整个子节点数
false: 浅复制– 复制节点

3.6 normalize() 处理文档树中的文本节点