js DOM model operation_javascript skills

DOM模型中的节点：元素节点、文本节点、属性节点
例：私のdotnet小屋
（1）a是元素节点
（2）“私のdotnet小屋”是文本节点
（3）href=”http://www.cnblogs.com/shuz”是属性节点
DOM节点的属性

属性	类型	说明
nodeName	String	节点名称，根据节点的类型而定义
nodeValue	String	节点的值，根据节点的类型而定义
nodeType	Number	节点类型，1为元素节点，2为属性节点，3为文本节点
firstChild	Node	指向childNodes列表的第一个节点
lastChild	Node	指向childNodes列表的最后一个节点
childNodes	NodeList	所有子节点列表，childNodes[i]可以访问第i+1个节点
parentNode	Node	指向节点的父节点，如果已是根节点，则返回null
previousSibling	Node	指向前一个兄弟节点，如果已是第一个节点，则返回null
nextSibling	Node	指向后一个兄弟节点，如果已是最后一个节点，返回null
Attributes	NameNodeMap	包含一个元素特性的Attr对象，仅用于元素节点
className	String	节点的CSS类
innerHTML	String	某个标记之间的所有内容，包括代码本身

Methods of DOM nodes
(1) Access nodes:
[By tag name]
document.getElementsByTagName(sTagName) method: Returns a list of element nodes containing the same tag name
[By tag ID]
document.getElementById(sElementId) method: Returns the element node whose Id is the specified value
[Access the previous node] Compatible with IE and FireFox
(customized)

Copy code The code is as follows:

function prevSib(oNode){
var oTempFirstNode=oNode.parentNode .firstChild;
//Determine whether it is the first node, if so, return null
if(oNode==oTempFirstNode)
return null;
var oTempNode=oNode.previousSibling;
//Search the previous sibling nodes one by one until the element node is found
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null)
oTempNode=oTempNode.previousSibling;
//Ternary operation symbol, if it is an element node, return the node itself, otherwise return null
return (oTempNode.nodeType==1)?:oTempNode:null;
}

[Visit the next node 】Compatible with IE and FireFox
(customized)

Copy code The code is as follows:

function nextSib(oNode){
var oTempLastNode=oNode.parentNode.lastChild;
//Determine whether it is the last node, if so, return null
if(oNode==oTempLastNode)
return null ;
var oTempNode=oNode.nextSibling;
//Search the following sibling nodes one by one until the element node is found
while(oTempNode.nodeType!=1 && oTempNode.nextSibling!=null)
oTempNode=oTempNode.nextSibling;
//Ternary operator, if it is an element node, return the node itself, otherwise return null
return(oTempNode.nodeType==1)?oTempNode:null;
}

(2) Determine whether a node has child nodes:
NodeObject.hasChildNodes() method: When childNodes contains one or more nodes, return true
(3) Set node attributes :
eleNode.getAttribute(attrNode) method: Returns the attrNode attribute of the eleNode element
eleNode.setAttribute(attrNode,sNewValue) method: Sets the value of the attrNode attribute of the eleNode element to sNewValue
(4) Create a node:
document.createElement(eleNode) method: Create an element node eleNode
document.createTextNode(textNode) method: Create a text node textNode
document.createDocumentFragment() method: Create a document fragment node
( 5) Add node:
eleNode.appendChild(textNode) method: Add textNode node to the end of childNodes
(6) Delete node:
oNode.parentNode.removeChild(oNode) method: Remove from childNodes oNode node
(7) Replace node:
oNode.parentNode.replaceChild(oNewNode,oOldNode) method: Replace the oOldNode node in childNodes with oNewNode node
(8) Insert a node before a specific node:
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode) method: Insert oNewNode node before oTargetNode node in childNodes
(9) Insert node after specific node:
(custom) oTargetNode.parentNode.insertAfter( oNewNode, oTargetNode) method: Insert the oNewNode node after the oTargetNode node in childNodes

Copy code The code is as follows:

function insertAfter(oNewNode,oTargetNode){
var oParentNode=oTargetNode.parentNode;
if(oParentNode.lastChild==oTargetNode)
oParentNode.appendChild(oNewNode);
else
oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling);
}