HTML DOM (ii): node additions and deletions

The previous article tells the basic knowledge of DOM, and from it that in the DOM eye, every component of HTML can be regarded as a node (document node, element node, text node, attribute node, annotation node, where the attribute node belongs to the element node), The content of this article is through the DOM of these nodes for the operation of the additional pruning and checking.

Get (R)
1. getElementById (ID), Getelementsbyname (name), getElementsByTagName (TagName), all three methods ignore the structure of the document.

• getElementById (ID): Gets the element node by ID, if the page contains more than one node with the same ID, then only the first node is obtained, in theory, the ID should be unique on the page. The node is obtained through $ ("#id") in jquery, which is similar to the ID selector in CSS.
• Getelementsbyname (name): Gets a set of element nodes by name and returns an array of nodes with the same name. Note that this method in IE and the Internet (FireFox, Chrome) performance is not the same, this method should not be the DOM Level 1 specification, IE support Level 1, and later standards have a lot of differences. There are several main differences:

  IE through Getelementsbyname (name) can only get form elements of the node;
  IE does not differentiate between ID and name, that is, by Getelementsbyname (name) The obtained node array also contains the same ID as name, by getElementById (ID), or by using name as the parameter, see the official description of MSDN.
  When you use the Getelementsbyname method, all elements in the document that has the specified NAME or ID a Ttribute value is returned. Elements that support both the NAME and the ID attribute is included in the collection returned by the Getelementsbyname method, but isn't elements with a NAME expando.

 
 

  
  
 
   
getElementsByTagName (TagName): Gets a set of element nodes by TagName, returning an array of nodes with the same tagName. The special thing about this method is that it can be used not only by the top-level document, but also by all element nodes. such as: document.getElementById ("container"). Getelementbytagname ("div"), which is somewhat similar to the CSS style, For example, define all div styles under the container element node:. container Div{display:none;}.
 
  
 
 
2. ParentNode, FirstChild, and LastChild, these three properties can be returned to use.
HTML instance:
　　
ParentNode: Gets the parent node of the current node, such as document.getElementById ("Level21"). ParentNode, can also obj.parentNode.parentNode.parentNode.
FirstChild: Gets the first child node of the current node, such as document.getElementById ("Level1"). FirstChild;, can also document.getElementById ("Level1"). Firstchild.firstchild.
LastChild: Gets the last child node of the current node, such as document.getElementById ("Level1"). LastChild.
3. Root node, Document.documentelement gets the HTML as well as the root node in the XML document, Document.body provides direct access to the body node.
4. All sub-nodes: ChildNodes and children, different versions of various browsers behave differently.
5. Node Information: nodeName (tagName), NodeValue, NodeType.

 
  

  
   
 
    
NodeName
 
   
 
  
The nodename of the element node is the label name
The nodename of the attribute node is the property name
The nodename of the text node is #text
The nodename of the document node is #document

 
  

  
   
 
    
NodeValue
 
   
 
  
The nodevalue of a text node contains text
The nodevalue of the attribute node contains the property value
ELEMENT nodes and document nodes are not nodevalue

 
  

  
   
 
    
NodeType
 
   
 
  
 
  
 
  
   
 
    
 
     
element Type
 
     
node Type
 
    
 
   
 
  
   
 
    
 
     
Elements
 
     
1
 
    
 
    
 
     
Property
 
     
2
 
    
 
    
 
     
Text
 
     
3
 
    
 
    
 
     
Comments
 
     
8
 
    
 
    
 
     
Document
 
     
9
 
    
 
   
 
 
  
Create (C) & Modify (U) & Delete (D)
Write an example of clicking a cell into a text box.
　　
 HTML DOM (ii): node additions and deletions