12 nodes of DOM

Catalog

blanket

Element nodes

Attribute node

Text node

CDATA node

Entity reference name node

Entity name node

Processing instruction node

Comment node

Document nodes

Document type node

Document fragment node

DTD Declaration node

DOM yes javascript Interface to operate web page , The full name is document object model (Document Object Model). Its function is to turn the web page into a javascript object , So that you can use javascript Carry out various operations on the web page ( For example, add or delete content ). The browser will follow DOM Model , take HTML The document is parsed into a series of nodes , Then these nodes form a tree structure .DOM The smallest unit of composition is called a node (node), The tree structure of the document (DOM Trees ) from 12 There are three types of nodes . This article will mainly explain DOM Node type

blanket

　　 In a general way , Nodes have at least nodeType、nodeName and nodeValue These three basic attributes . Different node types , The values of these three attributes are also different

nodeType

　　nodeType Property returns a constant value of the node type . Different types correspond to different constant values ,12 Each type corresponds to 1 To 12 Constant value of , as follows ：

12 The nodes are ：                 

 Element nodes             　　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)
 Comment node             　 Node.COMMENT_NODE(8)
 Document nodes             　 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)

DOM Defined a Node Interface , This interface is in javascript Middle as Node Type implementation , And in the IE8- All in the browser DOM Objects are COM In the form of objects . therefore ,IE8- Browsers don't support Node How to write objects

// Return to the standard browser 1, And in the IE8- Error in browser , Tips Node Undefined 
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 , The format is string

         Next , The order will be in accordance with the constant value of the node type , from 1 To 12 Detailed description

Element nodes

　　 Element nodes element The corresponding page HTML Tag element . Node type of element node nodeType The value is 1, The name of the node nodeName The value is the upper case tag name ,nodeValue The value is null

　　 With body Elements, for example

// 1 'BODY' null
console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
console.log(Node.ELEMENT_NODE === 1);//true

Attribute node

　　 Elements Characteristics of the node attribute In the corresponding page HTML Attributes of the tag , It only exists in the element attributes Properties of the , Not at all DOM Part of the document tree . Node type of property node nodeType The value is 2, The name of the node nodeName The value is the property name ,nodeValue Values are attribute values

　　 Now? ,div Elements have id="test" Properties of

<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>

Text node

　　 Text node text Represents... In a web page HTML Label content . The node type of the text node nodeType The value is 3, The name of the node nodeName The value is '#text',nodeValue Value is the tag content value

　　 Now? ,div The 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>

CDATA node

　　CDATASection Type is only for based on XML Documents , Only in XML In the document , It means CDATA Area , The format is generally

<![CDATA[
]]>

Node type of this type of node nodeType The value of is 4, The name of the node nodeName The value of is '#cdata-section',nodevalue The value of is CDATA Content in area

Entity reference name node

　　 An entity is a declaration , It's specified in XML Name used in place of content or mark . An entity consists of two parts , First , The name must be bound to the replacement content with an entity declaration . Entity declaration uses <!ENTITY name "value"> Syntax is defined in document type (DTD) or XML Created in the architecture . secondly , The name defined in the entity declaration will then be in XML Use in . stay XML When used in , This name is called entity reference .

　　 Entity reference name node entry_reference Node type of nodeType The value of is 5, The name of the node nodeName The value of is the name of the entity reference ,nodeValue The value of is null

// The entity name 
<!ENTITY publisher "Microsoft Press">
// Entity name references 
<pubinfo>Published by &publisher;</pubinfo>

Entity name node

　　 It has been explained in detail above , I won't go into that

　　 The node type of this node nodeType The value of is 6, The name of the node nodeName The value of is entity name ,nodeValue The value of is null

Processing instruction node

　　 Processing instruction node ProcessingInstruction Node type of nodeType The value of is 7, The name of the node nodeName The value of is target,nodeValue The value of is entire content excluding the target

Comment node

　　 Comment node comment Represents HTML notes . Note the node type of the node nodeType The value of is 8, The name of the node nodeName The value of is '#comment',nodeValue The value of is the content of the comment

　　 Now? , stay id by myDiv Of div There is one in the element <!-- I'm commenting on the content -->

<div id="myDiv"><!--  I'm commenting on the content  --></div>
<script>
var com = myDiv.firstChild;
//8 '#comment' ' I'm commenting on the content '
console.log(com.nodeType,com.nodeName,com.nodeValue)
console.log(Node.COMMENT_NODE === 8);//true    
</script>

Document nodes

　　 Document nodes document Express HTML file , Also known as the root node , Point to document object . Node type of document node nodeType The value of is 9, The name of the node nodeName The value of is '#document',nodeValue The value of is null

<script>
//9 "#document" null
console.log(document.nodeType,document.nodeName,document.nodeValue)
console.log(Node.DOCUMENT_NODE === 9);//true    
</script>

Document type node

　　 Document type node DocumentType Contains information related to the document doctype All the information about . Node type of document type node nodeType The value of is 10, The name of the node nodeName The value of is doctype The name of ,nodeValue The value of is null

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var nodeDocumentType = document.firstChild;
//10 "html" null
console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);
console.log(Node.DOCUMENT_TYPE_NODE === 10);
</script>
</body>
</html>

Document fragment node

　　 Document fragment node DocumentFragment There is no corresponding tag in the document , Is a lightweight document , Can contain and control nodes , But it doesn't take up as much extra resources as a complete document . The node type of this node nodeType The value of is 11, The name of the node nodeName The value of is '#document-fragment',nodeValue The value of is null

<script>
var nodeDocumentFragment = document.createDocumentFragment();    
//11 "#document-fragment" null
console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);
console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true
</script>

DTD Declaration node

　　DTD Declaration node notation representative DTD The symbol declared in . The node type of this node nodeType The value of is 12, The name of the node nodeName The value of is the symbol name ,nodeValue The value of is null