Overview of 12 DOM node types in JavaScript

xTable of Contents [1] element [2] attribute [3] text [4]CDATA[5] entity reference [6] Entity name [7] processing instruction [8] Note [9] document [10] Document type [11] document fragment [12]DTD Front

The DOM is the interface of the JavaScript Operation Web page, all called the Document Object model. Its role is to convert the Web page into a JavaScript object, so that you can use JavaScript to do various things (such as adding and deleting content). The browser parses the HTML document into a series of nodes based on the DOM model, and then the nodes form a tree structure. The smallest constituent unit of the DOM is called node, and the document's tree structure (DOM tree) consists of 12 types of nodes. This article will mainly describe the DOM node type

Property

In general, nodes have at least three basic properties of NodeType, NodeName, and NodeValue. Different node types, the values of these three properties are not the same

NodeType

The NodeType property returns the constant value of the node type. Different types correspond to different constant values, and 12 types correspond to constant values of 1 to 12, respectively.

 element Node Node.element_node (1 2
    
     ) text node Node.text_node (
     34) entity reference name node Node.entry_reference_node ( 5 67) note Node Node.comment_node ( 8) document node Node.document_node ( 9 10) document fragment node Node.document_fragment_node ( 11) 

The DOM defines a node interface, which is implemented as a node type in JavaScript, and all DOM objects in the Ie8-browser are implemented as COM objects. Therefore, the Ie8-browser does not support the syntax of the node object

// return 1 under standard browser, and error in ie8-browser, hint Node undefined console.log (node.element_node); // 1

NodeName

NodeName property returns the name of the node

NodeValue

The NodeValue property returns or sets the value of the current node, formatted as a string

Next, the sequence of constant values for the node type is described in detail from 1 to 12.

"1" Element node

Elements node element corresponds to the HTML tag element of the Web page. The node type of the element node NodeType value is 1, the node name nodename value is the uppercase label name, and the NodeValue value is null

Take the BODY element as an example

// 1 ' BODY ' null  = = = 1); // true

"2" Attribute node

The element attribute node attribute The property of the HTML tag in the Web page, which exists only in the attributes attribute of the element and is not part of the DOM document tree. The node type of the attribute node NodeType value is 2, the node name nodename value is the property name, and the NodeValue value is the property value

Now, the DIV element has a property of id= "test"

<div id= "Test" ></div><script>var attr = test.attributes.id; // 2 ' id ' ' Test '  = = = 2); // true     </script>

"3" Text node

Textual node text represents the HTML tag content in a Web page. The node type of the text node NodeType value is 3, the node name nodename value is ' #text ', the NodeValue value is the label content value

Now, the div element content is ' test '

<div id= "Test" > Test </div><script>var txt = test.firstchild; // 3 ' #text ' test '  = = = 3); // true     </script>

"4" CDATA Node

The cdatasection type is only for XML-based documents and appears only in the XML document, which represents the CDATA area, which is generally formatted as

<! [cdata[]]>

The node type for this type of node NodeType has a value of 4, the value of node name nodename is ' #cdata-section ', and the NodeValue value is the content in the CDATA area

"5" Entity reference name node

An entity is a declaration that specifies the name that is used in place of the content or markup in the XML. The entity contains two parts, first, you must bind the name to the replacement using the entity declaration. Entity declarations are using <! ENTITY name ' value ' > syntax created in a document type definition (DTD) or XML Schema. Second, the name defined in the entity declaration is then used in the XML. When used in XML, the name is called an entity reference.

The Entity reference name node entry_reference the value of the node type NodeType is 5, the value of the node name NodeName is the name of the entity reference, and the value of NodeValue is null

// Entity name <! Entities Publisher "Microsoft Press" >// entity name reference <pubinfo>published by &publisher;</ Pubinfo>

"6" Entity name node

It has been explained in detail above, and will not repeat

The node's node type NodeType has a value of 6, the value of the node name nodename is the entity name, and the value of NodeValue is null

"7" Processing instruction node

The value of the node type NodeType for the processing instruction node ProcessingInstruction is 7, and the value of the node name nodename is target,nodevalue entire content excluding the target

"8" Comment node

The comment node comment represents an HTML comment in a Web page. The value of the node type NodeType for the comment node is 8, the value of the node name nodename is ' #comment ', and the value of NodeValue is the content of the comment

Now, there is a <!--in the DIV element with ID mydiv I am the annotation content--

<div id= "mydiv" ><!--I am the comment content--></div><script>var com = mydiv.firstchild; // 8 ' #comment ' I am the comment content '  = = = 8); // true     </script>

"9" Document node

Document node documents represents an HTML document, also known as a root node, that points to a document object. The node type of the document node is nodetype with a value of 9, the value of node name nodename is ' #document ', and the value of NodeValue is null

<script>//9 "#document" null= = 9); // true     </script>

"10" Document type node

The document type node DocumentType contains all the information about the DOCTYPE of the document. The value of node type NodeType for the document type node is 10, the value of node name NodeName is the name of DOCTYPE, and the value of NodeValue is null

<! DOCTYPE html>var nodedocumenttype = document.firstchild; // "html" null  = = = Ten); </script></body>
"11" Document fragment node
The document fragment node DocumentFragment does not have a corresponding tag in the document, and is a lightweight document that can contain and control nodes, but does not win over additional resources like the full document tracing. The node's node type NodeType has a value of 11, the value of node name nodename is ' #document-fragment ', and the value of NodeValue is null
<script>var nodedocumentfragment = document.createdocumentfragment ();     // One "#document-fragment" null  = = = 11); // true</script>
"12" DTD Declaration node
The DTD declaration node notation represents the symbol declared in the DTD. The node's node type NodeType has a value of 12, the value of node name nodename is the symbol name, and the value of NodeValue is null
At last
Of these 12 types of DOM nodes, there are some that apply to XML documents, and some are infrequently used types. For the common types, the following will be introduced in detail, this article on the 12 types of nodes only to do an overview
Overview of 12 DOM node types in JavaScript