JS DOM model Operation _javascript Skill

Nodes in the DOM model: element nodes, text nodes, attribute nodes
Example: <a href= "Http://www.cnblogs.com/shuz" > Private のdotnet Cabin </a>
(1) A is an element node
(2) "Private のdotnet Cabin" is a text node
(3) href= "Http://www.cnblogs.com/shuz" is an attribute node
Properties of the DOM node

Property	Type	Description
NodeName	String	Node name, defined according to the type of node
NodeValue	String	The value of the node, defined based on the type of node
NodeType	Number	Node type, 1 is an element node, 2 is an attribute node, and 3 is a text node
FirstChild	Node	Point to the first node of the ChildNodes list
LastChild	Node	Point to the last node in the ChildNodes list
ChildNodes	NodeList	All child nodes list, Childnodes[i] can access the I+1 node
ParentNode	Node	Point to the parent node of the node, or null if it is already a root node
PreviousSibling	Node	Point to the previous sibling node and return NULL if it is the first node
NextSibling	Node	Point to the latter sibling node, if it is the last node, return null
Attributes	Namenodemap	A attr object that contains an element attribute, used only for element nodes
ClassName	String	CSS classes for nodes
InnerHTML	String	All the content between a tag, including the code itself

methods of DOM nodes
(1) Access nodes:
"Through label name"
document.getElementsByTagName (Stagname) Method: Returns a list of element nodes containing the same label name
"Through tag ID"
document.getElementById (Selementid) method: Returns an element node with an ID of the specified value
"Access to previous node" compatible with IE and Firefox
(custom)

Copy Code code as follows:

function Prevsib (onode) {
var otempfirstnode=onode.parentnode.firstchild;
To determine if it is the first node, and return NULL if it is
if (Onode==otempfirstnode)
return null;
var otempnode=onode.previoussibling;
Search the previous sibling until the element node is found
while (Otempnode.nodetype!=1 && otempnode.previoussibling!=null)
otempnode=otempnode.previoussibling;
The three-mesh operator, if it is an element node, returns the node itself, otherwise it returns null
Return (otempnode.nodetype==1)?: O Tempnode:null;
}

"Access to the next node" compatible with IE and Firefox
(custom)

Copy Code code as follows:

function Nextsib (onode) {
var otemplastnode=onode.parentnode.lastchild;
Determine if it is the last node, and return NULL if it is
if (Onode==otemplastnode)
return null;
var otempnode=onode.nextsibling;
Search the following sibling nodes, until the element node is found
while (Otempnode.nodetype!=1 && otempnode.nextsibling!=null)
otempnode=otempnode.nextsibling;
The three-mesh operator, if it is an element node, returns the node itself, otherwise it returns null
Return (otempnode.nodetype==1) otempnode:null;
}

(2) to determine whether a node has child nodes:
Nodeobject.haschildnodes () Method: Returns True when ChildNodes contains one or more nodes
(3) Set node properties:
Elenode.getattribute (Attrnode) method: Returns the Attrnode property of the Elenode element
Elenode.setattribute (Attrnode,snewvalue) method: Sets the value of the Attrnode property 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 nodes:
Elenode.appendchild (Textnode) method: Add Textnode node to the end of ChildNodes
(6) Delete the node:
ONode.parentNode.removeChild (Onode) method: Remove Onode node from childnodes
(7) Replacement node:
ONode.parentNode.replaceChild (Onewnode,ooldnode) method: Replace Ooldnode node in childnodes with Onewnode node
(8) Insert a node before a specific node:
OTargetNode.parentNode.insertBefore (Onewnode,otargetnode) method: Insert a Onewnode node before the Otargetnode node in childnodes
(9) Insert a node after a specific node:
(custom) OTargetNode.parentNode.insertAfter (Onewnode,otargetnode) method: Insert a Onewnode node after Otargetnode node in childnodes

Copy Code code as follows:

function InsertAfter (onewnode,otargetnode) {
var Oparentnode=otargetnode.parentnode;
if (Oparentnode.lastchild==otargetnode)
Oparentnode.appendchild (Onewnode);
Else
Oparentnode.insertbefore (onewnode,otargetnode.nextsibling);
}