JavaScript DOM features and applications (1)

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. The value of Node. nodeType is 1-12 ).

BKJIA recommended reading: The nature and operation methods of JavaScript DOM

The following are the types of nodes:

 
 

  
  
Node. ELEMENT_NODE (1)
  
  
Node. ATTRIBUTE_NODE (2)
  
  
Node. TEXT_NODE (3) // <! [CDATA []> contains plain text. It does not have subnodes.
  
  
Node. CDATA_SECTION_NODE (4) // The child Node must be TextNode.
  
  
Node. ENTITY_REFERENCE_NODE (5)
  
  
Node. ENTITY_NODE (6) // object definition in DTD <! ENTITY foo "foo">, no subnode
  
  
Node. PROCESSING_INSTRUCTION_NODE (7) // PI, no subnode
  
  
Node. COMMENT_NODE (8)
  
  
Node. DOCUMENT_NODE (9) // Root element of the outermost layer, including all other nodes
  
  
Node. DOCUMENT_TYPE_NODE (10) // DTD, <! DOCTYPE ......>
  
  
Node. DOCUMENT_FRAGMENT_NODE (11)
  
  
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 subnodes.
  
  
Node. CDATA_SECTION_NODE (4) // The child Node must be TextNode.
  
  
Node. ENTITY_REFERENCE_NODE (5)
  
  
Node. ENTITY_NODE (6) // object definition in DTD <! ENTITY foo "foo">, no subnode
  
  
Node. PROCESSING_INSTRUCTION_NODE (7) // PI, no subnode
  
  
Node. COMMENT_NODE (8)
  
  
Node. DOCUMENT_NODE (9) // Root element of the outermost layer, including all other nodes
  
  
Node. DOCUMENT_TYPE_NODE (10) // DTD, <! DOCTYPE ......>
  
  
Node. DOCUMENT_FRAGMENT_NODE (11)
  
  
Node. NOTATION_NODE (12) // Nation definition in DTD
 
 

Features/methods contained in the Node interface

◆ 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 the 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 of 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 indicates a 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;

◆ RemoveChild (node) deletes the node from childNodes;

◆ InsertBefore (newnode refnode) inserts newnode before the refnode in childNodes.

 
 

  
  
Var container = document. getElementById ("content ");
  
  
Var message = document. getElementById ("fineprint ");
  
  
Var para = document. createElement ("p ");
  
  
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) replaces oldnode in childNodes with newnode.
  
  
Var container = document. getElementById ("content ");
  
  
Var message = document. getElementById ("fineprint ");
  
  
Var para = document. createElement ("p ");
  
  
Container. replaceChild (para, message );
  
  
 
  
  
Var container = document. getElementById ("content ");
  
  
Var message = document. getElementById ("fineprint ");
  
  
Var para = document. createElement ("p ");
  
  
Container. replaceChild (para, message); then get Node:
  
  
 
  
  
/* Use the document Object */
  
  
Var oHtml = document.doc umentElement;
  
  
/* Get  
  
Var oHead = oHtml. firstChild;
  
  
Var oBody = oHtml. lastChild;
  
  
/* This method can be used */
  
  
Var oHead = oHtml. childNodes [0];
  
  
Var oBody = oHtml. childNodes [1];
  
  
/* You can also use the method to obtain the index value of the array */
  
  
Var oHead = oHtml. childNodes. item (0 );
  
  
Var oBody = oHtml. childNodes. item (1 );
  
  
/* Use document. body to get <body/> */
  
  
Var oBody = document. body;
  
  
 
  
  
/* Use the document Object */
  
  
Var oHtml = document.doc umentElement;
  
  
/* Get  
  
Var oHead = oHtml. firstChild;
  
  
Var oBody = oHtml. lastChild;
  
  
/* This method can be used */
  
  
Var oHead = oHtml. childNodes [0];
  
  
Var oBody = oHtml. childNodes [1];
  
  
/* You can also use the method to obtain the index value of the array */
  
  
Var oHead = oHtml. childNodes. item (0 );
  
  
Var oBody = oHtml. childNodes. item (1 );
  
  
/* Use document. body to get <body/> */
  
  
Var oBody = document. body; 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);