Javascript与DOM

一、Node

DOM模型定义了Node接口，在DOM中的每个节点都是一个Node（即实现了Node接口），每个Node都有自身的Node类型，可以通过nodeType属性返回的数值区分，以下是各种节点类型所对应的数值：

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

 

知道了这些信息之后，可以通过以下方法判断节点对象的类型：

//IE9以下不支持
if (someNode.nodeType == Node.ELEMENT_NODE){
   alert("Node is an element.");
}

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

要获得Node的信息，使用以下方法：

var divNode = document.createElement("div");
var textNode = document.createTextNode("Text Node");

alert(divNode.nodeName);   //DIV
alert(divNode.nodeValue);  //null
alert(textNode.nodeName);  //#text
alert(textNode.nodeValue); //Text Node

 

 

二、Node关系相关的属性

var node = document.getElementById("test");
//上一个兄弟节点
var prevSibling = node.previousSibling;
//下一个兄弟节点
var nextSibling = node.nextSibling;
//所有（一级）子节点
var childNodes = node.childNodes;
//父节点
var parentNode = node.parentNode;
//第一个（一级）子节点
var firstChildNode = node.firstChild;
//最优一个（一级）子节点
var lastChildNode = node.lastChild;
//是否存在子节点
var hasChildNodes = node.hasChildNodes();

 

 三、操纵Nodes

//创建Element节点
var newNode = document.createElement("div");
//创建文本节点
var textNode = document.createTextNode("Created text node");
//复制textNode节点
//参数deep代表是否进行深克隆，若为true，则同时复制子节点
var textNode2 = textNode.cloneNode(false);

var node = document.getElementById("test");

//把newNode插入为node的最后一个子节点
node.appendChild(newNode);
newNode.appendChild(textNode);

//把textNode2插入到textNode之前
node.insertBefore(textNode2, newNode);
//从node中移除textNode2（保持被移除元素的引用）
var removedChildNode = node.removeChild(textNode2);
//用removedChildNode替换newNode
node.replaceChild(removedChildNode, newNode);
//当某个节点存在两个或以上的相邻的文本节点时，
//可以用normalize()方法合并文本节点
node.normalize();