Core of DOM: Node

Core of DOM: Node
Because Dom is a tree structure, a node is abstracted as an object node, which is the core object of DOM:
There are 12 types of nodes, which are determined by the value of node. nodetype (1-12:

JS Code

2. Node. element_node (1)
4. Node. attribute_node (2)
6. Node. text_node (3)// <! [CDATA []> contains plain text. It does not have subnodes.
8. Node. cdata_section_node (4)// The child node must be textnode.
10. Node. entity_reference_node (5)
12. Node. entity_node (6)// Object definition in DTD <! Entity Foo "Foo">, no subnode
14. Node. processing_instruction_node (7)// Pi, no subnode
16. Node. comment_node (8)
18. Node. document_node (9)// The root element of the outermost layer, including all other nodes
20. Node. document_type_node (10)// DTD, <! Doctype ......>
22. Node. document_fragment_node (11)
24. Node. notation_node (12)// Nation definition in DTD

Node. element_node (1) node. attribute_node (2) node. text_node (3) // <! [CDATA []> contains plain text. It does not have a subnode node. cdata_section_node (4) // The subnode must be textnodenode. entity_reference_node (5) node. entity_node (6) // object definition in DTD <! Entity Foo "Foo">, no subnode. processing_instruction_node (7) // Pi, no subnode. comment_node (8) node. document_node (9) // The root element of the outermost layer, including all other nodes. document_type_node (10) // DTD, <! Doctype ......> Node. document_fragment_node (11) node. notation_node (12) // nation definition in DTD
 

Features/methods of the worker node interface
Node attributes
The nodename attribute returns a string whose content is the name of the given node. If the node is an element node, the name of the element is returned. If the node is an attribute node, the name of the attribute is returned. If the node is a text node, a string with the content of # text is returned;

The nodetype attribute returns an integer that represents the type of the given node.
The nodevalue attribute returns the current value of the given node. if the node is an element node, null is returned. If the node is an attribute node, the name of the attribute is returned. If the node is a text node, the content of the text node is returned;

Ownerdocument points to the document to which this node belongs
The attributes package Halle represents the ATTR object of an element. It is only used for element nodes.

List of all child nodes in childnodes
Firstchild points to the first node in the childnodes list
Lastchild points to the last node in the childnodes list
Nextsibling points to the next sibling node. If this node is the last sibling node, the value is null.
Previussibling refers to the forward sibling node. If this node is the first sibling node, the value is null.
Parentnode returns the parent node of a given node.

❑ Haschildnodes () returns true if childnodes contains one or more nodes.
❑ Appendchild (node) adds the node to the end of childnodes
Revoke removechild (node) deletes a node from childnodes

❑ Insertbefore (newnode refnode) inserts newnode before the refnode in childnodes

JS Code

1. VaRContainer = Document. getelementbyid ("Content");
2. VaRMessage = Document. getelementbyid ("Fineprint");
3. VaRPara = Document. createelement ("P");
4. Container. insertbefore (para, message );

 
VaR Container = document. getelementbyid ("content"); var message = document. getelementbyid ("fineprint"); var para = document. createelement ("p"); container. insertbefore (para, message );
 

ReplaceChild (newnode, oldnode) replace oldnode in childnodes with newnode

JS Code

1. VaRContainer = Document. getelementbyid ("Content");
2. VaRMessage = Document. getelementbyid ("Fineprint");
3. VaRPara = Document. createelement ("P");
4. Container. replaceChild (para, message );

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

Worker to get node:

JS Code

2. /* Use the Document Object */
4. VaROhtml = document.doc umentelement;
10. /* Get
12. VaROhead = ohtml. firstchild;
14. VaRObody = ohtml. lastchild;
16. /* This method can be used */
18. VaROhead = ohtml. childnodes [0];
20. VaRObody = ohtml. childnodes [1];
22. /* You can also use the method to obtain the index value of the array */
24. VaROhead = ohtml. childnodes. Item (0 );
26. VaRObody = ohtml. childnodes. Item (1 );
28. /* Use document. Body to get <body/> */
30. VaRObody = Document. Body;

/* Use the Document Object */var ohtml = document.doc umentelement;/* to obtain  
 
Using createelement (element)
Create a specified tag name and create a new element node. The returned value is the reference pointer pointing to the new element node.
EG) var para = Document. createelement ("p ");
Document. Body. appendchild (para );
 

 
❑ Createtextnode ()
Create a new text node that contains the given text and return a reference pointer pointing to the new text node:
Reference = Document. createtextnode ()
The parameter is the text string contained in the new text node.
 
JS Code

 

 
  
 
   
VaRMessage = Document. createtextnode ("Hello World");
 
   
VaRContainer = Document. createelement ("P");
 
   
Container. appendchild (Message );
 
   
Document. Body. appendchild (container ); 
 
  
 

 
 
VaR message = document. createtextnode ("Hello World"); var Container = document. createelement ("p"); container. appendchild (Message); document. body. appendchild (container );
 
 
❑ Clonenode ()
Reference = node. clonenode (deep)
Create a copy for a given node. The parameter is true or false. True indicates that the child node of the node is copied at the same time. If false, no child node is copied.
 
JS Code

 

 
  
 
   
   var   para = document. createelement (  "p"  );  
 
   
     var   message = document. createtextnode (  "Hello World"   );  
 
   
  para. appendchild (Message);  
 
   
  document. Body. appendchild (para);  
 
   
     var   newpara = para. clonenode (   true   );  
 
   
  document. Body. appendchild (newpara);  
 
  

 
VaR para = document. createelement ("p"); var message = document. createtextnode ("Hello World"); para. appendchild (Message); document. body. appendchild (para); var newpara = para. clonenode (true); document. body. appendchild (newpara );
 
 
Worker detection Node Type
Verify the node type by using the nodetype feature:
Alert (document. nodetype); // outputs "9"
Alert(document.doc umentelement. nodetype); // outputs "1"
In this example, document. nodetype returns 9, which is equal to node. document_node. Meanwhile, document. documentelement. nodetype returns 1, which is equal to node. element_node.
 

 
You can also use the node constant to match these values:
Alert (document. nodetype = node. document_node); // true
Alert(document.doc umentelement. nodetype = node. element_node); // true
 

 
This code can run properly on Mozilla 1.0 +, opera 7.0 +, and Safari 1.0 +. However, ie does not support these constants, so these codes may produce errors on IE.
 

Pipeline Processing Features
Even if the node interface already has the attributes method and has been inherited by all types of nodes, only the element node can have the feature.
The attributes attribute of the element node is actually namednodemap, which provides some methods for accessing and processing its content:
Getnameditem (name) returns the node whose nodename attribute value is equal to name;
Removenameditem (name) deletes a node whose nodename attribute value is equal to name;
Setnameditem (node) adds a node to the list and indexes it according to its nodename attribute;
Like nodelist, item (POS) returns the position POS node;
 

 
Remember that all these methods return an ATTR node instead of a specific value.
The namednodemap object also has a Length attribute to indicate the number of nodes it contains.
 

 
When namednodemap is used to represent a feature, each node is an ATTR node, and its nodename attribute is set to the feature name, while the nodevalue attribute is set to the feature value.
For example, suppose there is such an element:
<P id = "p1" style = "color: Red"> Hello world! </P>
 

 
Assume that the variable op contains a reference pointing to this element. You can access the value of the ID feature as follows:
VaR SID = op. Attributes. getnameditem ("ID"). nodevalue; // p1
Or
VaR SID = op. Attributes. Item (0). nodevalue;
 

 
You can also change the ID feature by assigning a new value to the nodevalue attribute:
Op. Attributes. getnameditem ("ID"). nodevalue = "newid ";
 

 
The ATTR Node also has a value attribute that is completely equivalent to (and fully synchronized with) the nodevalue attribute, and the name attribute and nodename attribute are synchronized. We can use these attributes to modify or change features at will.
 

Because this method is cumbersome, Dom defines three element methods to help access features:
Getattribute (name) is equal to attributes. getnameditem (name). value;
Setattribute (name, newvalue) is equal to attribute. getnameditem (name). value = newvalue;
Removeattribute (name) is equal to attributes. removenameditem (name)
 

 
To obtain the ID feature of <p/>, you only need to do this:
VaR SID = op. getattribute ("ID ");
Change ID:
Op. setattribute ("ID", "newid ");
 

 
❑ Setattribute ()
Element. setattribute (attributename, attributevalue );
Add a new attribute value for a given element node or change its existing attribute.
 

 
❑ Getattribute
Attributevalue = element. getattribute (attributename)
Returns the value of a given attribute node for a given element.
 

 
❑ Getelementbyid ()
Element = Document. getelementbyid (ID)
Searches for an element with a given ID attribute value and returns an element node.
 

 
❑ Getelementsbyname ()
Used to obtain all elements whose name attribute is equal to the specified value:
Elements = Document. getelementsbyname (tagname)
Returns a node set.
 

 
❑ Getelementsbytagname ()
Used to find all elements with a signature for the calibration:
Elements = Document. getelementsbytagname (tagname)
Returns a node set.
 

Worker generation and operation Node
Createattribute (name): Create an attribute node named name.
Createcdatasection (text): Create a CDATA zone with the subnode text.
Createcomment (text): Creates a comment node whose comment content is text.
Createdocumentfragment (): Creates a fragment node.
Createelement (tagname): creates an element node named tagname.
Createentityreference (name): creates an entity reference node with the given name.
Createprocessinginstruction (target, data): Creates a PI node with the given target and data.
Createtextnode (text): Creates a text node that contains text.
The most important methods are createelement (), createdocumentfragment (), and create textnode ().
 
JS Code

 

 
  
 
   
 /* use createelement (), createtextnode (), appendchild () dynamically add nodes */ 
 
   
     function   createmessage () { 
 
   
     var   op = document. createelement (  "p"   );  
 
   
     var   otext = document. createtextnode (  "Hello world! " );  
 
   
  op. appendchild (otext);  
 
   
  document. Body. appendchild (OP);  
 
   
 } 
 
  

 
/* Use createelement (), createtextnode (), and appendchild () to dynamically add nodes */function createmessage () {var op = document. createelement ("p"); var otext = document. createtextnode ("Hello world! "); OP. appendchild (otext); document. Body. appendchild (OP );}
 
 
Using createdocumentfragment ()
 
JS Code

 

 
  
 
  
// Common practice
 
 
  
 
  
VaRArrtext = ['First','Second','Third'];
 
 
  

  
For(VaRI = 0; I <arrtext. length; I ++ ){
 
 
  
 
  
VaROP = Document. createelement ('P');
 
 
  
 
  
VaROtext = Document. createtextnode (arrtext [I]);
 
 
  
 
  
Op. appendchild (otext );
 
 
  
 
  
Document. Body. appendchild (OP );
 
 
  
 
  
}
 
 
  

  
 
 
  
 
  
// Use documentfragment
 
 
  
 
  
VaRArrtext = ['First','Second','Third'];
 
 
  
 
  
VaROfragment = Document. createdocumentfragment ();
 
 
  
 
  
For(VaRI = 0; I <arrtext. length; I ++ ){
 
 
  

  
VaROP = Document. createelement ('P');
 
 
  
 
  
VaROtext = Document. createtextnode (arrtext [I]);
 
 
  
 
  
Op. appendchild (otext );
 
 
  
 
  
Ofragment. appendchild (OP );
 
 
  
 
  
}
 
 
  
 
  
Document. Body. appendchild (ofragment ); 
 

 
// Var arrtext = ['first', 'second', 'third']; for (VAR I = 0; I <arrtext. length; I ++) {var op = document. createelement ('P'); var otext = document. createtextnode (arrtext [I]); OP. appendchild (otext); document. body. appendchild (OP);} // use documentfragmentvar arrtext = ['first', 'second', 'third']; var ofragment = document. createdocumentfragment (); For (VAR I = 0; I <arrtext. length; I ++) {var op = document. createelement ('P'); var otext = document. createtextnode (arrtext [I]); OP. appendchild (otext); ofragment. appendchild (OP);} document. body. appendchild (ofragment );
 
 
The documentfragment method is more efficient.
 

 
Invalid html dom:
The core method of using Dom is for all XML, and there are special methods for HTML Dom, such
Use Dom core: oimg. setattribute ("src", "picture.gif ");
Use html dom: oimg. src = "picture.jpg ";