DOM(一)：节点层次－Node类型

Node类型
DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现，每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node
类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

元素节点 　　Node.ELEMENT_NODE(1)
属性节点 　　Node.ATTRIBUTE_NODE(2)
文本节点 　　Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点 　　 Node.ENTRY_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)
DTD声明节点 Node.NOTATION_NODE(12)

为了确保跨浏览器兼容，最好还是将nodeType属性与数字值进行比较

if(someNode.nodeType == 1){
    console.log('node is an element.');
    value = someNode.nodeName;
}

nodeName中保存的始终都是元素的标签名，而nodeValue的值则始终为null。在使用这两个值以前，最好是像上面这样先检测一下节点的类型

 

NodeList
每个节点都有一个childNodes属性，其中保存着一个NodeList对象，NodeList对象是一种类数组对象，用于保存一组有序的点，可以通过位置来访问
这些节点。NodeList对象是自动变化的

<!DOCTYPE html>
<html>
    <head>
        <title>sample page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

 

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

无论使用方括号还是使用item()方法都没有问题，length属性表示都是访问nodelist都那一刻，其中包涵的节点数量

 

将NodeList对象转化为数组

function converToArray (nodes) {
    var arrary = null;
    try {
        array = Array.prototype.slice.call(nodes,0); //在ie8及之前版本中无效，需要手动创建数组
    }catch (ex) {
        array = new Array();
        for (var i=0,len=nodes.length ; i<len ; i++) {
            array.push(nodes[i]);
        }
    }
    return array;
}

 

检测是第一个节点还是最后一个
每个节点都有一个parentNode属性，该属性指向文档树中的父节点。
包含在childNodes列表中的每个节点相互之间都是同胞节点，previousSibling(上一个同胞节点),nextSibling(下一个同胞节点)

if(someNode.nextSibling === null){
    console.log('last node'); //最后一个节点
}else if(someNode.previousSibling === null){
    console.log('first node'); //第一个节点
}

如果列表只有一个节点，那么该节点的nextSibing和previousSibling都为null.

posted @ 2018-04-03 07:14  wzndkj  阅读(365)  评论(0)  编辑  收藏  举报