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();
相关推荐
swazerz 2020-05-16
boneix 2020-10-21
seanzed 2020-10-15
ifconfig 2020-10-14
学留痕 2020-09-20
往后余生 2020-09-17
kka 2020-09-14
redis 2020-09-07
lzccheng 2020-09-06
soyo 2020-08-31
stonerkuang 2020-08-18
LxyPython 2020-08-17
raksmart0 2020-08-17
Lzs 2020-08-14
MrHaoNan 2020-07-31
80530895 2020-07-05
lengyu0 2020-06-28
YarnSup 2020-06-28