On the content of the node in JavaScript to strengthen _ basics

One, Element node

Copy Code code as follows:

Test element node, output node name, node type, node value
var lielements=document.getelementsbytagname ("Li");
for (Var i=0;i<lielements.length;i++) {
alert (lielements[i].nodename);
alert (Lielements[i].nodetype);
alert (Lielements[i].nodevalue);
}

Second, attribute node

Copy Code code as follows:

[/c//test attribute node, output attribute node name, node type, node value
var lielements=document.getelementsbytagname ("Li");
for (Var i=0;i<lielements.length;i++) {
var attrelement=lielements[i].getattributenode ("value")
Alert ("Attrelement.nodename" +attrelement.nodename);
Alert ("Attrelement.nodetype" +attrelement.nodetype);
Alert ("Attrelement.nodevalue" +lielements[i].getattribute ("value"));
}ode]

Third, text node
[Code]
Test element node, output node name, node type, node value
var lielements=document.getelementsbytagname ("Li");
for (Var i=0;i<lielements.length;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 way to read
alert (lielements[i].firstchild.nodename);
alert (Lielements[i].firstchild.nodetype);
alert (Lielements[i].firstchild.nodevalue);
}

Iv. Replacement Node

ReplaceChild ()
Replaces a child node in a given parent element with another child node
var reference = Element.replacechild (Newchild,oldchild);
The return value is a reference pointer to the child node that has been replaced.
If the child node being inserted also has child nodes, those child nodes are also inserted into the target node

Copy Code code as follows:

Method One
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"));
}

V. Find attribute nodes

GetAttribute ()
Returns the value of a given attribute node for a given element
var attributevalue = Element.getattribute (AttributeName);
The name of the given property must be passed to the method as a string.
The value of the given property is returned as a string, and getattribute () returns an empty string if the given property does not exist.
To get an attribute node from a property
GetAttributeNode (Name of the property)--node

<li name= "Beijing" id= "BJ" > Beijing </li>

To get the value of a property through a property name
var Bjelement=document.getelementbyid ("BJ");
var attributevalue=eduelement.getattribute ("name");
Alert ("AttributeValue" +attributevalue);

The node that gets the property through the property name
var bjnode=eduelement.getattributenode ("name");
alert (Edunode.nodevalue);
alert (Edunode.nodetype);
alert (edunode.nodename);

Six, set the attribute node

SetAttribute ()
Adds a new property value to the given element node or changes the value of its existing property.
Element.setattribute (Attributename,attributevalue);
The name and value of the property must be passed as a string to this method
If this property already exists, its value will be refreshed;
If it does not exist, the setattribute () method first creates it and assigns it a value.

<li id= "BJ" > Beijing </li>

Get a reference to an element
var Bjelement=document.getelementbyid ("BJ");
Setting property values
Bjelement.setattribute ("name", "Beijing");
Gets the property value of the setting
var namevalue=bjelement.getattribute ("name");
Alert ("Namevalue" +namevalue);

Vii. creating a new element node

CreateElement ()
Creates a new element node according to the given label name. Method has only one argument: the name of the element that will be created, is a string.
var reference = document.createelement (element);
Method return value: is a reference pointer to the new node. The return value is an element node, so its NodeType property value is equal to 1.
The new element node is not automatically added to the document, the new node has no nodeparent attribute, it is just an object that exists in the JavaScript context.
var pelement = document.createelement ("P");

To create a new element
var pelement=document.createelement ("Li");
Setting property values
Pelement.setattribute ("id", "pid");

Get parent Element
var Loveelement=document.getelementbyid ("Love");
To add child elements to the parent element
Loveelement.appendchild (pelement);

Get the element you just created by ID
var Pidelement=document.getelementbyid ("pid");
Alert (Pidelement.getattribute ("id"));

Viii. Creating a new text node

createTextNode ()
Creates a new text node that contains the given text. The return value of this method is a reference pointer to a new text node.
var textnode = document.createTextNode (text);
Method has only one parameter: The text string contained in the new text node
Method return value: is a reference pointer to the new node. It is a text node, so its NodeType property equals 3.
The new element node is not automatically added to the document, and the new node does not have the Nodeparent attribute

var pelementtext=document.createelement ("Li");
var textelement=document.createtextnode ("Nanjing");
Pelementtext.appendchild (TextElement);

Ix. inserting nodes (1)

AppendChild ()
Adds a child node to a given element:
var newreference = Element.appendchild (newchild).
The given child node newchild becomes the last child node of the given element node element.
The return value of the method is a reference pointer to the new child node.
This method is usually used in conjunction with createelement () createTextNode ()
The new node can be appended to any one of the elements in the document

Copy Code code as follows:

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);

Ten, delete the node

RemoveChild ()
Deletes a child node from a given element
var reference = Element.removechild (node);
The return value is a reference pointer to a child node that has been deleted.
When a node is deleted by the RemoveChild () method, all of the child nodes that the node contains will be deleted at the same time.

Copy Code code as follows:

<ul id= "City" > <li value= "beijing^" id= "Beijing" > Beijing </li> </ul>
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 is, the ParentNode attribute can help.

Copy Code code as follows:

<ul id= "City" > <li value= "beijing^" id= "Beijing" > Beijing </li> </ul>
var Lielement=document.getelementbyid ("Beijing");
var Parentelement=lielement.parentnode;
Parentelement.removechild (lielement);

XI. traversal of the node tree

ChildNodes: Returns an array that consists of the child nodes of a given element node:
var nodelist = node.childnodes;
Neither the text node nor the attribute node can contain any child nodes, so their childnodes properties always return an empty array.
If you want to know if an element has child nodes, you can use the HasChildNodes method.
If you want to know how many child nodes an element has, you can use the Length property of the ChildNodes array.
The ChildNodes property is a read-only property.

12. Get the first child node

FirstChild: This property returns the first child node of a given element node, which returns a pointer to this node object.
var reference = Node.firstchild;
Neither the text node nor the attribute node can contain any child nodes, so their firstchild properties always return null.
The FirstChild property of an element is equivalent to the first node in the ChildNodes node collection of this element, namely:
var reference = node. Childnodes[0];
The FirstChild property is a read-only property.

13. Get the last child node

LastChild: A property corresponding to the FirstChild.
NextSibling: Returns the next sibling node of a given node.
ParentNode: Returns the parent node of a given node.
The ParentNode property returns a node that is always an element node because only element nodes can contain child nodes.
The document node does not have a parent node.
PreviousSibling: Returns the previous sibling node of a given node

14, innerHTML Property

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

Copy Code code as follows:

<div id= "City" ></div>
var Divelement=document.getelementbyid ("City");
Divelement.innerhtml= "<li value= ' beijing^ ' id= ' Beijing ' > Beijing </li>";