Javascript DOM operations

1. Create a node
The createelement () method creates a new element node based on the given tag name. Its nodetype attribute value is 1.
The createtextnode () method creates a new text node that contains the given text. Its nodetype attribute value is 3.
The return value is a reference pointer to the new node.
VaR para = Document. createelement ("p ");
VaR message = Document. createtextnode ("Hello World ");
Para. appendchild (Message );
Document. Body. appendchild (para );

2. Copy a node
The clonenode () method creates a copy for a given node. The return value of this method is a reference pointer pointing to the new cloned node.
This method has only one Boolean parameter, and its value can only be true or false. If the parameter is true, the new node will contain the same child node as the copied node. If this parameter value
If the value is false, the new node does not contain any subnodes. If the copied node is an element node, all text contained in the copied node will not be copied, however, the property node will be copied:
VaR para = Document. createelement ("p ");
VaR newpara = para. clonenode (true );
VaR newpara2 = para. clonenode (false );

3. Insert a node
The appendchild () method appends a subnode to the element node. Its return value is a reference pointer pointing to the newly added subnode.
VaR para = Document. createelement ("p ");
VaR message = Document. createtextnode ("Hello World ");
Para. appendchild (Message );
Document. Body. appendchild (para );
The insertbefore () method inserts a given node into a given parent node before the subnode. Its return value is a reference pointer pointing to the new subnode:
Reference = element. insertbefore (newnode, targetnode );
The insertbefore () method can be used not only to insert new elements, but also to move existing nodes in the document.
VaR Container = Document. getelementbyid ("content ");
VaR message = Document. getelementbyid ("fineprint ");
VaR Annoncement = Document. getelementbyid ("headline ");
Container. insertbefore (Annoncement, message );
Headline is deleted first, and then inserted to the front of the fineprint element contained in the content element.

4. delete a node
The removechild () method deletes a subnode from a given element. Its return value is a reference pointer to a deleted subnode:
Reference = element. removechild (node );

VaR Container = Document. getelementbyid ("content ");
VaR message = Document. getelementbyid ("fineprint ");
Container. removechild (Message );
If you want to delete a node and do not know its parent node, the parentnode attribute can help:
VaR message = Document. getelementbyid ("fineprint ");
VaR Container = message. parentnode;
Container. removechild (Message );

5. Replace nodes
The replaceChild () method replaces a child node in a given parent element with another child node. Its return value is a reference pointer pointing to the child node that has been replaced:
Reference = element. replaceChild (newchild, oldchild)

VaR Container = Document. getelementbyid ("content ");
VaR message = Document. getelementbyid ("fineprint ");
VaR para = Document. createelement ("p ");
Container. replaceChild (para, message );

The replaceChild () method can also replace another existing node with an existing node in the document tree.
VaR Container = Document. getelementbyid ("content ");
VaR message = Document. getelementbyid ("fineprint ");
VaR announcement = Document. getelementbyid ("headline ");
Container. replaceChild (Announcement, message );
Use headline to replace fineprint

VaR Container = Document. getelementbyid ("content ");
VaR message = Document. getelementbyid ("fineprint ");
VaR announcement = Document. getelementbyid ("headline ");
VaR oldmessage = container. replaceChild (Announcement, message );
Container. appendchild (oldmessage );
Use headline to replace fineprint, and re-insert fineprint to content.

6. Set attribute nodes
The setattribute () method adds a new attribute value for a given element node or changes its existing attribute value:
Element. setattribute (attributename, attributevalue)

VaR para = Document. createelement ("p ");
Para. setattribute ("ID", "fineprint ");
VaR Container = Document. getelementbyid ("content ");
Container. appendchild (para );

Delete attributes
Element. removeattribute ("href ");

7. Search for nodes
The getattribute () method returns the value of a node with a given attribute for a given element:
Attributevalue = element. getattribute (attributename)
The getelementbyid () method is used to find an element with a given ID attribute value. The element node returned by this method is an object with attributes such as nodename, nodetype, parentnode, and childnodes.
Element = Document. getelementbyid (ID)
The getelementsbytagname () method is used to search for all elements with a signature for the calibration:
Elements = Document. getelementsbytagname (tagname)
This method returns a node set, which can be processed as an array. The Length attribute of this set is equal to the total number of all elements in the current document that have signature for calibration. Every element in this array is
An object with attributes such as nodename, nodetype, parentnode, and childnodes.
The haschildnodes method can be used to check whether a given element has subnodes:
Blooleanvalue = element. haschildnodes
This method returns a Boolean value of true or false.

Dom attributes
1. The nodename attribute returns a string whose content is the name of the given node:
Name = node. nodename

2. The nodetype attribute returns an integer representing the type of the given node:
Integer = node. nodetype

3. The nodevalue attribute returns the current value of the given node:
Value = node. nodevalue

Traverse node tree
1. The childnodes attribute returns an array consisting of subnodes of the given element node:
Nodelist = node. childnodes

2. The firstchild attribute returns the first subnode of a given element node:
Reference = node. firstchild

3. The lastchild attribute returns the last subnode of a given element node:
Referance = node. lastchild

4. The nextsibling attribute returns the next subnode of a given node.
Referance = node. nextsibling

5. The parentnode attribute returns the parent node of a given node:
Referance = node. parentnode

6. The previussibling attribute returns the previous subnode of a given node.
Referance = node. previussibling