JavaScript Learning Notes: DOM node overview

0x01

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.
The HTML DOM defines the standard way to access and manipulate HTML documents, and the DOM expresses the HTML document as a tree structure. (This should be the classic picture of the world)
According to personal understanding, CSS corresponding to the tag, JS corresponding elements, the DOM corresponding node, the three names actually represent the same content, but different technical names.

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

0x02: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.

    元素节点            　　 Node.ELEMENT_NODE(1)属性节点            　　     Node.ATTRIBUTE_NODE(2)文本节点            　　     Node.TEXT_NODE(3)CDATA节点                   Node.CDATA_SECTION_NODE(4)实体引用名称节点    　  Node.ENTRY_REFERENCE_NODE(5)实体名称节点        　　 Node.ENTITY_NODE(6)处理指令节点        　 　Node.PROCESSING_INSTRUCTION_NODE(7)注释节点            　       Node.COMMENT_NODE(8)文档节点            　       Node.DOCUMENT_NODE(9)文档类型节点        　　Node.DOCUMENT_TYPE_NODE(10)文档片段节点        　　Node.DOCUMENT_FRAGMENT_NODE(11)DTD声明节点               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, the Ie8-browser does not support the syntax of the node object

//在标准浏览器下返回1，而在IE8-浏览器中报错，提示Node未定义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.

# 0x02：元素节点　元素节点element对应网页的HTML标签元素。元素节点的节点类型nodeType值是1，节点名称nodeName值是大写的标签名，nodeValue值是null

Take the BODY element as an example

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

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‘console.log(attr.nodeType,attr.nodeName,attr.nodeValue)console.log(Node.ATTRIBUTE_NODE === 2);//true    </script>

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">测试</div><script>var txt = test.firstChild;//3 ‘#text‘ ‘测试‘console.log(txt.nodeType,txt.nodeName,txt.nodeValue)console.log(Node.TEXT_NODE === 3);//true    </script>   

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
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 publisher "Microsoft Press">//实体名称引用<pubinfo>Published by &publisher;</pubinfo>

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

Processing instruction Nodes
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

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"><!-- 我是注释内容 --></div><script>var com = myDiv.firstChild;//8 ‘#comment‘ ‘我是注释内容‘console.log(com.nodeType,com.nodeName,com.nodeValue)console.log(Node.COMMENT_NODE === 8);//true    </script>

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" nullconsole.log(document.nodeType,document.nodeName,document.nodeValue)console.log(Node.DOCUMENT_NODE === 9);//true    </script>

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>

Document fragment Node
The document fragment node DocumentFragment does not have a corresponding tag in the document, is a lightweight document that can contain and control nodes, but does not occupy additional resources like a complete document. The node's node type NodeType has a value of 11, the node name nodename a value of ' #document-fragment ', and the NodeValue value is null.

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

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 the node name nodename is the symbol name, and the value of NodeValue is null.

0x03

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

JavaScript Learning Notes: DOM node overview