《JS高程（3）》DOM节点层次Node类型-第10章笔记(11)_在dom3级引入的node类型-优快云博客

本文链接：https://blog.youkuaiyun.com/ymc_webpack/article/details/54860583

节点层次

节点之间的关系构成了层次，所有页面标记则表现为一个以特定节点为根节点的树形结构。
文档节点document是每个文档的根节点。文档节点只有一个子节点—<html>文档元素。文档元素是文档的最外层元素，文档中的所有元素都包含在其中，每个文档只能有一个文档元素。

Node类型

节点类型	数值常量
Node.ELEMENT_NODE	1
Node.ATTRIBUTE_NODE	2
Node.TEXT_NODE	3
Node.CDATA_SECTION _NODE	4
Node.ENTITY_PEFERENCE _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_FPAGMENT _NODE	11
Node.NOTATION_NODE	12

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

IE没有公开Node类型的

// 对所有浏览器有效
if(someNode.nodeType == 1){
    alert("Node is an element.");
}

nodeName和nodeValue属性

nodeName:始终保存的是元素的标签名
nodeValue:对于元素节点为空。

节点关系

每个节点都有一个childNodes属性，其中保存着一个NodeList对象，类似数组，有length属性，可以通过[]访问NodeList的值，但它并不是Array的实例，反馈的是一个动态结果，访问的是某个瞬间的一个值。

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

arrayObject.slice(start,end)

//通过call()遍历将其转换为数组
//在IE8及之前版本无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

IE中将NodeList转换为数组必须枚举所有成员。

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

childNodes列表中所有节点为子节点，即同胞节点，可通过previousSibling与nextSibling访问同胞节点。

if(someNode.nextSiling === null){
    alert("Last node in the parent's childNodes list.");
}else if(someNode.previousSiling === null){
    alert("First node in the parent's childNodes list.");
}

操作节点

关系指针是只读的，操作方法如下：

方法名	参数	作用
appendChild()	新增节点	在childNodes列表的末尾添加节点
insertBefore()	插入的节点和参照的节点	被插入的节点会变成参照节点的前一个同胞节点
replaceChild()	插入的节点和替换节点	被替换的节点由这个方法返回并从文档树中移除，同时插入节点
removeChild()	移除的节点	被移除的节点将成为方法的返回值