On 12 kinds of DOM node types in JavaScript _javascript techniques

Objective

The function of Dom is to turn a Web page into a JavaScript object, so that you can use JavaScript to do a variety of things (such as add and delete content). The browser parses the HTML document into a series of nodes based on the DOM model, and the nodes form a tree structure. The smallest constituent unit of the DOM is called node, and the tree structure of the document (the DOM tree) consists of 12 types of nodes.

Property

Generally, nodes have at least three basic properties of NodeType,nodename , and nodevalue .

The values of these three properties are different for the node type

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)

Attribute node Node.attribute_node (2)

Text node Node.text_node (3)

CDATA node Node.cdata_section_node (4)

Entity reference name node Node.entry_reference_node (5)

Entity name Node Node.entity_node (6)

Processing instruction Node Node.processing_instruction_node (7)

Annotation node Node.comment_node (8)

Document node Node.document_node (9)

Document Type node Node.document_type_node (10)

Document fragment node Node.document_fragment_node (11)

DTD Declaration node Node.notation_node (12)

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, ie8-browsers do not support the writing of node objects

Returns 1 in the standard browser, and the error in the Ie8-browser prompts Node not to define
Console.log (node.element_node);//1

NodeName

NodeName property returns the name of the node

NodeValue

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

Next, it will be explained in detail from 1 to 12 according to the order of constant value of the node type

"1" Element node

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

Take the BODY element as an example

1 ' body ' null
console.log (document.body.nodetype,document.body.nodename,document.body.nodevalue)
Console.log (Node.element_node = = 1);//true

"2" Attribute node

The element attribute node attribute corresponds to the HTML tag in the page, and it exists only in the attributes attribute of the element, not as part of the DOM document tree. The node type nodetype value of the attribute node is 2, the node name nodename value is the property name, and the NodeValue value is the property value

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

<div id= "Test" ></div>
<script>
var attr = test.attributes.id;
2 ' id ' Test '
console.log (attr.nodetype,attr.nodename,attr.nodevalue)
console.log (Node.attribute_node = = = 2);//true 
</script>

"3" Text node
The text node text represents the HTML label content in the Web page. The node type nodetype value of the text node is 3, the node name nodename value is ' #text ', 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 '
console.log (txt.nodetype,txt.nodename,txt.nodevalue)
console.log (Node.text_node = = 3) ;//true 
</script>

"4" CDATA Nodes

The cdatasection type is for xml-based documents only and appears in XML documents, which represent CDATA regions, typically

<! [Cdata[
]]>

The node type of the type node NodeType a value of 4, the nodename value of the node name 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 to be used in place of content or markup in XML. An entity contains two parts, first, you must bind the name to the replacement with an entity declaration. Entity declarations are using <! The ENTITY name "value" > syntax is created in a document type definition (DTD) or XML Schema. Second, the name defined in the entity declaration will then be used in XML. When used in XML, this name is called an entity reference.

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

Entity name
<! ENTITY publisher "Microsoft Press" >
//Entity name reference
<pubinfo>published by &publisher;</pubinfo>

"6" Entity name node
It has been explained in detail, and we will not repeat it.

The node type of the node NodeType a value of 6, the NodeName value of the node name is the entity name, and the NodeValue value is null

"7" Processing instruction node

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

"8" Annotation node

Note Node comment represents an HTML comment in a Web page. Note Node's node type NodeType value is 8, node name nodename value is ' #comment ', nodevalue value is the content of the annotation

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

<div id= "mydiv" ><!--I am a comment content--></div>
<script>
var com = mydiv.firstchild;
8 ' #comment ' I am the annotation content '
console.log (com.nodetype,com.nodename,com.nodevalue)
Console.log (Node.comment_ NODE = = 8);//true 
</script>

"9" Document node

Document node documents represents an HTML document, also called the root node, pointing to the Document object. The node type of the document node NodeType a value of 9, the nodename value of the node name is ' #document ', and the NodeValue value is null

<script>
//9 "#document" null
console.log (document.nodetype,document.nodename,document.nodevalue )
Console.log (Node.document_node = = 9);//true 
</script>

"10" Document type node

The document type node DocumentType contains all the information related to the DOCTYPE of the document. The node type of the document type node NodeType a value of 10, the nodename value of the node name is the DOCTYPE name, and the NodeValue value is null

<! DOCTYPE html>
 
 

"11" Document fragment node

The document fragment node DocumentFragment has no corresponding tag in the document and is a lightweight document that can contain and control nodes, but will not overcome additional resources like a complete document tracing. The node type of the node NodeType a value of 11, the NodeName value of the node name is ' #document-fragment ', and the NodeValue value is null

<script>
var nodedocumentfragment = document.createdocumentfragment (); 
One "#document-fragment" null
console.log (Nodedocumentfragment.nodetype,nodedocumentfragment.nodename, Nodedocumentfragment.nodevalue);
Console.log (Node.document_fragment_node = =);//true
</script>

"12" DTD Declaration node

The DTD declaration node notation represents the symbol declared in the DTD. The node type NodeType a value of 12, the node name nodename value is the symbol name, and the NodeValue value is null

Summarize

Of the 12 types of DOM nodes, some are suitable for XML documents and some are not commonly used. And for the common types, later will be introduced in detail, this article on these 12 types of node only to do an overview, I hope this article can help.