Javascript enhances node content

Source: Internet
Author: User
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
  • ";

     

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.