js节点解析

在JS中，每一个节点都有一个nodeType 属性，用于表明节点的类型。节点类型由在Node 类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

• Node.ELEMENT_NODE(1);
• Node.ATTRIBUTE_NODE(2);
• Node.TEXT_NODE(3);
• Node.CDATA_SECTION_NODE(4);
• Node.ENTITY_REFERENCE_NODE(5);
• Node.ENTITY_NODE(6);
• Node.PROCESSING_INSTRUCTION_NODE(7);
• Node.COMMENT_NODE(8);
• Node.DOCUMENT_NODE(9);
• Node.DOCUMENT_TYPE_NODE(10);
• Node.DOCUMENT_FRAGMENT_NODE(11);
• Node.NOTATION_NODE(12);

if (someNode.nodeType == 1) { //适用于所有浏览器
    value = someNode.nodeName;
}

在这个例子中，首先检查节点类型，看它是不是一个元素。如果是，则取得并保存nodeName 的值。对于元素节点，nodeName 中保存的始终都是元素的标签名，而nodeValue 的值则始终为null。

每个节点都有一个childNodes 属性，其中保存着一个NodeList 对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。请注意，虽然可以通过方括号语法来访问NodeList 的值，而且这个对象也有length 属性，但它并不是Array 的实例。

下面的例子展示了如何访问保存在NodeList 中的节点——可以通过方括号，也可以使用item()方法。

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

无论使用方括号还是使用item()方法都没有问题，但使用方括号语法看起来与访问数组相似。在JS中，可以对arguments 对象使用Array.prototype.slice()方法将其转换为数组。而采用同样的方法，也可以将NodeList 对象转换为数组。

//在IE8 及之前版本中无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);
// 或
var arrayOfNodes = Array.prototype.slice.apply(someNode.childNodes, [0]);
// 或
var arrayOfNodes = [].call(someNode.childNodes, 0);
// 或
var arrayOfNodes = [].apply(someNode.childNodes, [0]);

除IE8 及更早版本之外，这行代码能在任何浏览器中运行。要想兼容IE8以前版本，解决方案如下：

function convertToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0); //针对非IE 浏览器
    } catch (ex) {
        array = new Array();
        for (var i = 0, len = nodes.length; i < len; i++) {
            array.push(nodes[i]);
        }
    }
    return array;
}

这个convertToArray()函数首先尝试了创建数组的最简单方式。如果导致了错误（说明是在IE8 及更早版本中），则通过try-catch 块来捕获错误，然后手动创建数组。