Basic Dom methods and attributes

• DOM method
  
• Create a node: the basic purpose of the following DOM method is to create a new node.
• • Createelement ():

The createelement () method creates a new element node based on the given tag name. The return value of this method is a reference pointer to specify a new element node:
Reference = Document. createelement (element)
This method has only one parameter: the name of the element to be created. This is a string:
Reference = Document. createelement ("p ")
Reference = Document. createelement ("h1 ")

• Createtextnode ():

The createtextnode () method is to create a new text node containing the given text. The return value of this method is a reference pointer pointing to the new text node:
Reference = Document. createtextnode (text) This method has only one parameter: The text string contained in the new text node:
Reference = Document. createtextnode ("Hello, world ")
Example:
Step 1: Create a text node that contains the text "Test 1" and assign the reference pointer returned by the createtextnode () method to the Message variable.
VaR message = Document. createtextnode ("Experiment 1 ");
Step 2: Use the createelement () method to create a P element and assign its reference pointer to the variable container.
VaR Container = Document. createelement ("p ");
Step 3: Use the appendchild () method to insert the message text node into the container element node.
Container. appendchild (Message );
Step 4: append the refreshed iner element to the document body element.
Document. Body. appendchild (container );

• Copy node:
• • Clonenode ()

The clonenode () method creates a copy for a given node. The return value of this method is a reference pointer pointing to the new clone node.
Reference = node. clonenode (deep)
This method has only one Boolean parameter, and its value can only be true or false, this parameter determines whether to copy the child nodes of the copied node to the new node.
Reference = node. clonenode (true)
Reference = node. clonenode (false)
Example:
VaR para = Document. createelement ("p ");                 Creates a para text segment element.
VaR message = Document. reatetextnode ("Experiment 2 "); Creates a message text node.
Para. appendchild (Message );                                           Insert the message text node into the Para Element Node
Document. Body. appendchild (para );                               Insert para into the document body Element
VaR newpara = para. clonenode (true );
Call the clonenode () method to copy a new element node newpara from the Para node (and its subnodes ).
Document. Body. appendchild (newpara );                         Insert newpara into the document body Element
The final result is that two identical text segments are inserted into the document.

• Insert Node
• • Appendchild ()

The appendchild () method appends a subnode to the fixed element node:
Reference = element. appendchild (newchild)
Newchild is the last child node of the given element. The return value of this method is a reference pointer pointing to the newly added subnode.
This method is usually used with the createelement () and createtextnode () Methods used to create a new node.

• Insertbefore ()

The insertbefore () method inserts a given node into the front of a given element node to the subnode. It returns a reference pointer to the specified new subnode:
Reference = element. insertbefore (newnode, targetnode)
The node newnode is inserted into the element of the element and appears before the targetnode of the node. The targetnode must be a subnode of the element. If the targetnode node is not provided, the newnode node is appended to the last subnode of the element.
The insertbefore () method is usually used with the createelement () and createtextnode () Methods to insert new nodes into the document tree. It can also be used to move existing nodes in the document.

• Delete a node
• • Removechild ()

The removechild () method deletes a subnode from a given element:
Reference = element. removechild (node)
The return value of this method is a reference pointer pointing to the deleted subnode. When a node is deleted by the removechild () method, all the child nodes contained in the node are also deleted.
For example, deleting an ID attribute value is an element in the content that contains an ID attribute value fineprint.
VaR Container = Document. getelementbyid ("content ");
VaR message = Document. getelementbyid ("fineprint ");
Container. removechild (Message)
If you want to delete a node but do not know which parent node it belongs to, the parentnode attribute can help:
VaR message = Document. getelementbyid ("fineprint ");
VaR Container = message. parentnode;
Container. removechild (Message );

• Replace node:
• • ReplaceChild ()

ReplaceChild () method replaces one child node in a given parent element with another node:
Reference = element. replaceChild (newchild, oldchild)
The oldchild node must be a subnode of the element. The returned value is a reference pointer pointing to the child node that has been replaced.

• Set attribute nodes
• • Setattribute ()

The setattribute () method adds a new attribute value for a given element node or changes the value of its existing attribute:
Element. setattribute (attributename, attributevalue)
The attribute name and value must be passed to this method in the form of a string. If this attribute already exists, its value is refreshed. If it does not exist, the setattribute () method creates it and assigns it a value. The setattribute () method can only be used on Attribute nodes.

• Search nodes
• • Getattribute ()
• • The getattribute () method returns the value of a given attribute node of a given element:
  • 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 specified attribute does not exist, the getattribute () method returns an empty string.
• • Getelementbyid ()
• • The getelementbyid () method is used to find an element with a given ID attribute value:
  • Element = Document. getelementbyid (ID)
  • This method returns an element node with a given ID attribute value. If such an element does not exist, null is returned. This method can only be used for document objects.
• • Getelementsbytagname_r ()
• • The getelementsbytagname_r () method is used to search for all elements with a signature for the calibration:
  • Elements = Document. getelementsbytagname_r (tagname)
  • 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. Each element in this array is an object, which has attributes such as nodename, nodetype, parentnode, and childnodes.
• • Haschildnodes

The haschildnodes method can be used to check whether a given element has subnodes:
Booleanvalue = element. haschildnodes
This method returns a Boolean value of true or false. If the given element has subnodes, the return value of the haschildnodes method will always be false.

Dom attributes

• Node attributes
• • Nodename: returns a string whose content is the name of the given node:

Name = node. nodename
If the given node is: an element node                 The nodename attribute will return the name of this element.
          An attribute node                                                         Name of this attribute
                              One text node                                                         A string whose content is # text
The nodename attribute is a read-only attribute. It can only be queried (read) and cannot be directly set (written ).

• Nodetype: Read-only attribute. Returns an integer representing the type of the given node:

Integer = node. nodetype
The nodetype attribute has two optional values. The returned integer corresponds to one of the following 12 node types:

1. 1. element_node
2. 2. attribute_node
3. 3. text_node
4. 4. cdata_section_node
5. 5. entity_reference_node
6. 6. entity_node
7. 7. processing_instruction_node
8. 8. comment_node
9. 9. document_node
10. 10. document_type_node
11. 11. document_fragment_node
12. 12. notation_node

• Nodevalue: the attribute returns the current value of the given node:

Value = node. nodevalue
This attribute returns a string.
If a given node is an attribute node                     The nodevalue attribute returns the value of this attribute.
                                      Text Node                                                               Content of this text node
                                      Element Node                                                               Null
The nodevalue attribute is a read/write attribute. However, you cannot set a value that has been defined as null. In other words, you cannot set a value for the nodevalue attribute of an element node. You can set a value for the nodevalue attribute of a text node.

• Traverse node tree

• Childnodes: the attribute returns an array consisting of subnodes of the given element node:

Nodelist = node. childnodes
The returned property is a nodelist set. Each node in this nodelist set is a Node object. These node objects all have common node attributes such as nodetype, nodename, and nodevalue.

• Firstchild: the attribute returns the first node of a given element node:

Reference = node. firstchild
This property returns a reference pointer to a Node object. This Node object has common node attributes such as nodetype, nodename, and nodevalue.

• Lastchild: the attribute is a read-only attribute. The last subnode of a given element node is returned:

Reference = node. lastchild
This property returns a reference pointer to a Node object. This Node object has common node attributes such as nodetype, nodename, and nodevalue.

• Nextsibling: the attribute returns the next subnode of a given node.

Reference = node. nextsibling
This property returns a reference pointer to a Node object. This Node object has common node attributes such as nodetype, nodename, and nodevalue.

• Parentnode: The property returns the parent node of a given node.

Reference = node. parentnode
This property returns a reference pointer to a Node object. This Node object has common node attributes such as nodetype, nodename, and nodevalue.

• Previussibling: the attribute returns the next subnode of a given node.

Reference = node. previussibling
This property returns a reference pointer to a Node object. This Node object has common node attributes such as nodetype, nodename, and nodevalue.