Javascript enhances node content

I. Element Node // test element node, output node name, node type, and node value varliElementsdocument. getElementsByTagName (& quot; li & quot;); for (vari0; I & lt; liElements. length; I ++) {alert (liElements [I]. nodeName);

I. Element nodes

// Test the element node, output node name, node type, and node Value
Var liElements = document. getElementsByTagName ("li ");
For (var I = 0; I Alert (liElements [I]. nodeName );
Alert (liElements [I]. nodeType );
Alert (liElements [I]. nodeValue );
}
[Html] view plaincopyprint? // Test the element node, output node name, node type, and node Value
Var liElements = document. getElementsByTagName ("li ");
For (var I = 0; I Alert (liElements [I]. nodeName );
Alert (liElements [I]. nodeType );
Alert (liElements [I]. nodeValue );
}

// Test the element node, output node name, node type, and node Value
Var liElements = document. getElementsByTagName ("li ");
For (var I = 0; I Alert (liElements [I]. nodeName );
Alert (liElements [I]. nodeType );
Alert (liElements [I]. nodeValue );
}
 

Ii. Attribute nodes

// Test the attribute node. The name of the output attribute node, the type of the node, and the value of the node.
Var liElements = document. getElementsByTagName ("li ");
For (var I = 0; I Var attrElement = liElements [I]. getAttributeNode ("value ")
Alert ("attrElement. nodeName" + attrElement. nodeName );
Alert ("attrElement. nodeType" + attrElement. nodeType );
Alert ("attrElement. nodeValue" + liElements [I]. getAttribute ("value "));
}
[Html] view plaincopyprint? // Test the attribute node. The name of the output attribute node, the type of the node, and the value of the node.
Var liElements = document. getElementsByTagName ("li ");
For (var I = 0; I Var attrElement = liElements [I]. getAttributeNode ("value ")
Alert ("attrElement. nodeName" + attrElement. nodeName );
Alert ("attrElement. nodeType" + attrElement. nodeType );
Alert ("attrElement. nodeValue" + liElements [I]. getAttribute ("value "));
}

// Test the attribute node. The name of the output attribute node, the type of the node, and the value of the node.
Var liElements = document. getElementsByTagName ("li ");
For (var I = 0; I Var attrElement = liElements [I]. getAttributeNode ("value ")
Alert ("attrElement. nodeName" + attrElement. nodeName );
Alert ("attrElement. nodeType" + attrElement. nodeType );
Alert ("attrElement. nodeValue" + liElements [I]. getAttribute ("value "));
}
 

Iii. text nodes

// Test the element node, output node name, node type, and node Value
Var liElements = document. getElementsByTagName ("li ");
For (var I = 0; I Alert (liElements [I]. childNodes [0]. nodeName );
Alert (liElements [I]. childNodes [0]. nodeType );
Alert (liElements [I]. childNodes [0]. nodeValue );
 
LiElements [I]. childNodes [0]. nodeValue = "Nanjing ";
Alert (liElements [I]. childNodes [0]. nodeValue );
 
// Another read Method
Alert (liElements [I]. firstChild. nodeName );
Alert (liElements [I]. firstChild. nodeType );
Alert (liElements [I]. firstChild. nodeValue );
}
[Html] view plaincopyprint? // Test the element node, output node name, node type, and node Value
Var liElements = document. getElementsByTagName ("li ");
For (var I = 0; I Alert (liElements [I]. childNodes [0]. nodeName );
Alert (liElements [I]. childNodes [0]. nodeType );
Alert (liElements [I]. childNodes [0]. nodeValue );
 
LiElements [I]. childNodes [0]. nodeValue = "Nanjing ";
Alert (liElements [I]. childNodes [0]. nodeValue );
 
// Another read Method
Alert (liElements [I]. firstChild. nodeName );
Alert (liElements [I]. firstChild. nodeType );
Alert (liElements [I]. firstChild. nodeValue );
}

// Test the element node, output node name, node type, and node Value
Var liElements = document. getElementsByTagName ("li ");
For (var I = 0; I Alert (liElements [I]. childNodes [0]. nodeName );
Alert (liElements [I]. childNodes [0]. nodeType );
Alert (liElements [I]. childNodes [0]. nodeValue );

LiElements [I]. childNodes [0]. nodeValue = "Nanjing ";
Alert (liElements [I]. childNodes [0]. nodeValue );
 
// Another read Method
Alert (liElements [I]. firstChild. nodeName );
Alert (liElements [I]. firstChild. nodeType );
Alert (liElements [I]. firstChild. nodeValue );
}
 

4. Replacing nodes

ReplaceChild ()
Replaces one child node in a given parent element with another child node.
Var reference = element. replaceChild (newChild, oldChild );
The returned value is a reference pointer pointing to the child node that has been replaced.
If the inserted child node has a child node, the child nodes are also inserted into the target node.
 
 

// Method 1
// Var cityElement = document. getElementById ("city ");
// Var loveElement = document. getElementById ("love ");
// Var cityChildElement = document. getElementById ("beijing ");
// Var loveChildElement = document. getElementById ("fankong ");
// Var oldElement = cityElement. replaceChild (loveChildElement, cityChildElement );
// LoveElement. appendChild (oldElement );
// Alert (oldElement. getAttribute ("id "));
 
Var cityElement = document. getElementById ("city ");
CityElement. onclick = function (){
Var cityChildElement = document. getElementById ("beijing ");
Var loveChildElement = document. getElementById ("fankong ");
Var oldElement = cityElement. replaceChild (loveChildElement, cityChildElement );
LoveElement. appendChild (oldElement );
Alert (oldElement. getAttribute ("id "));
}
[Html] view plaincopyprint? // Method 1
// Var cityElement = document. getElementById ("city ");
// Var loveElement = document. getElementById ("love ");
// Var cityChildElement = document. getElementById ("beijing ");
// Var loveChildElement = document. getElementById ("fankong ");
// Var oldElement = cityElement. replaceChild (loveChildElement, cityChildElement );
// LoveElement. appendChild (oldElement );
// Alert (oldElement. getAttribute ("id "));
 
Var cityElement = document. getElementById ("city ");
CityElement. onclick = function (){
Var cityChildElement = document. getElementById ("beijing ");
Var loveChildElement = document. getElementById ("fankong ");
Var oldElement = cityElement. replaceChild (loveChildElement, cityChildElement );
LoveElement. appendChild (oldElement );
Alert (oldElement. getAttribute ("id "));
}

// Method 1
// Var cityElement = document. getElementById ("city ");
// Var loveElement = document. getElementById ("love ");
// Var cityChildElement = document. getElementById ("beijing ");
// Var loveChildElement = document. getElementById ("fankong ");
// Var oldElement = cityElement. replaceChild (loveChildElement, cityChildElement );
// LoveElement. appendChild (oldElement );
// Alert (oldElement. getAttribute ("id "));

Var cityElement = document. getElementById ("city ");
CityElement. onclick = function (){
Var cityChildElement = document. getElementById ("beijing ");
Var loveChildElement = document. getElementById ("fankong ");
Var oldElement = cityElement. replaceChild (loveChildElement, cityChildElement );
LoveElement. appendChild (oldElement );
Alert (oldElement. getAttribute ("id "));
}

 

5. Search for Attribute nodes

GetAttribute ()
Returns the value of a given attribute node for a given element.
Var attributeValue = element. getAttribute (attributeName );
The name of a given attribute must be passed to this method as a string.
The value of a given attribute is returned as a string. If the given attribute does not exist, getAttribute () returns an empty string.
Get attribute nodes through Properties
GetAttributeNode (attribute name) -- Node

Beijing

// Get the attribute value through the attribute name
Var bjElement = document. getElementById ("bj ");
Var attributeValue = eduElement. getAttribute ("name ");
Alert ("attributeValue" + attributeValue );

// Get the node with the attribute name
Var bjNode = eduElement. getAttributeNode ("name ");
Alert (eduNode. nodeValue );
Alert (eduNode. nodeType );
Alert (eduNode. nodeName );

6. Set attribute nodes

SetAttribute ()
Add a new attribute value to a given element node or change its existing attribute value.
Element. setAttribute (attributeName, attributeValue );
The attribute name and value must be passed to this method in the form of a string
If this property already exists, its value will be refreshed;
If it does not exist, the setAttribute () method will first create it and assign a value to it.
 

Beijing

// Obtain element reference
Var bjElement = document. getElementById ("bj ");
// Set the attribute value
BjElement. setAttribute ("name", "beijing ");
// Obtain the set property value
Var nameValue = bjElement. getAttribute ("name ");
Alert ("nameValue" + nameValue );

 

7. Create new element nodes

CreateElement ()
Creates a new element node based on the given tag name. The method has only one parameter: the name of the element to be created, which is a string.
Var reference = document. createElement (element );
Method return value: A Reference pointer pointing to a new node. The returned value is an element node, so its nodeType attribute value is equal to 1.
The new element node is not automatically added to the document. The new node does not have the nodeParent attribute. It is only an object in the JavaScript context.
Var pElement = document. createElement ("p ");

 

// Create a new element
Var pElement = document. createElement ("li ");
// Set the attribute value
PElement. setAttribute ("id", "pid ");
 
// Obtain the parent Element
Var loveElement = document. getElementById ("love ");
// Add a child element to the parent Element
LoveElement. appendChild (pElement );

// Obtain the newly created element by id
Var pidElement = document. getElementById ("pid ");
Alert (pidElement. getAttribute ("id "));

 

8. Create a new text node

CreateTextNode ()
Create a new text node that contains the given text. The return value of this method is a pointer to the new text node reference.
Var textNode = document. createTextNode (text );
The method has only one parameter: The text string contained in the new text node
Method return value: A Reference pointer pointing to a new node. It is a text node, so its nodeType attribute is equal to 3.
The new element node is not automatically added to the document. The new node does not have the nodeParent attribute.

Var pElementText = document. createElement ("li ");
Var textElement = document. createTextNode ("Nanjing ");
PElementText. appendChild (textElement );

9. Insert nodes (1)

AppendChild ()
Add a subnode to a given element:
Var newreference = element. appendChild (newChild ).
NewChild is the last child node of the given element.
The Return Value of the method is a reference pointer pointing to a new subnode.
This method is usually used with createElement () createTextNode ().
The new node can be appended to any element in the document.

Var newliElement = document. createElement ("li ");
Var textNode = document. createTextNode ("Beijing ");
NewliElement. appendChild (textNode );
Document. body. appendChild (newliElement );
 
Var liElement = document. getElementsByTagName ("li ");
Var textValue = liElement [0]. firstChild. nodeValue;
Alert (textValue );
[Html] view plaincopyprint? Var newliElement = document. createElement ("li ");
Var textNode = document. createTextNode ("Beijing ");
NewliElement. appendChild (textNode );
Document. body. appendChild (newliElement );
 
Var liElement = document. getElementsByTagName ("li ");
Var textValue = liElement [0]. firstChild. nodeValue;
Alert (textValue );

Var newliElement = document. createElement ("li ");
Var textNode = document. createTextNode ("Beijing ");
NewliElement. appendChild (textNode );
Document. body. appendChild (newliElement );
 
Var liElement = document. getElementsByTagName ("li ");
Var textValue = liElement [0]. firstChild. nodeValue;
Alert (textValue );
 

10. delete a node

RemoveChild ()
Deletes a subnode from a given element.
Var reference = element. removeChild (node );
The returned value is a reference pointer to a deleted subnode.
When a node is deleted by the removeChild () method, all the child nodes contained in the node are also deleted.

 

• Beijing

 
Var ulElement = document. getElementById ("city ");
Var liElement = document. getElementById ("beijing ");
UlElement. removeChild (liElement );
[Html] view plaincopyprint?

• Beijing

 
Var ulElement = document. getElementById ("city ");
Var liElement = document. getElementById ("beijing ");
UlElement. removeChild (liElement );

 

• Beijing

Var ulElement = document. getElementById ("city ");
Var liElement = document. getElementById ("beijing ");
UlElement. removeChild (liElement );

 

If you want to delete a node but do not know which parent node it belongs to, the parentNode attribute can help.

• Beijing

 
Var liElement = document. getElementById ("beijing ");
Var parentElement = liElement. parentNode;
ParentElement. removeChild (liElement );
[Html] view plaincopyprint?

• Beijing

 
Var liElement = document. getElementById ("beijing ");
Var parentElement = liElement. parentNode;
ParentElement. removeChild (liElement );

 

• Beijing

Var liElement = document. getElementById ("beijing ");
Var parentElement = liElement. parentNode;
ParentElement. removeChild (liElement );
 

11. traverse the node tree

ChildNodes: returns an array consisting of subnodes of the given element node:
Var nodeList = node. childNodes;
Neither the text node nor the attribute node can contain any subnodes. Therefore, their ChildNodes attribute always returns an empty array.
If you want to know whether an element has subnodes, you can use the hasChildNodes method.
To know the number of subnodes of an element, you can use the length attribute of the childNodes array.
The childNodes attribute is a read-only attribute.

12. Obtain the first subnode

FirstChild: This attribute returns the first child node of a given element node and the pointer of this Node object.
Var reference = node. firstChild;
Neither a text node nor a property node can contain any child node. Therefore, their firstChild attribute always returns null.
The firstChild attribute of an element is equivalent to the first node in the childNodes node set of this element, that is:
Var reference = node. ChildNodes [0];
The firstChild attribute is a read-only attribute.

13. Obtain the last subnode

LastChild: corresponds to an attribute of firstChild.
NextSibling: returns the next sibling node of a given node.
ParentNode: returns the parent node of a given node.
The node returned by the parentNode attribute is always an element node, because only an element node can contain subnodes.
The document node does not have a parent node.
Previussibling: returns the previous sibling node of a given node.

14. innerHTML attributes

Almost all browsers support this attribute, but it is not part of the DOM standard.
The innerHTML attribute can be used to read and write the HTML content of a given element.

 
 
Var divElement = document. getElementById ("city ");
DivElement. innerHTML ="

Beijing

";