The Dom to understand

The definition of the Dom

Is a JavaScript interface for manipulating web pages, called Document Object Model (Document Object).

Function:

Turn a web page into a Javascript object that can be scripted to perform various operations (such as adding and deleting content).

Browser operation principle:

Based on the DOM model, browsers parse structured documents (such as HTML and XML) into a series of nodes that form a DOM Tree. All nodes, and the final tree structure, have formal interfaces.

DOM is implemented with:

DOM is just an interface specification that can be implemented in a variety of languages. Strictly speaking, DOM is not part of Javascript syntax, but DOM manipulation is the most common Javascript task, without which Javascript cannot control a web page. In addition, Javascript is the language most commonly used for DOM manipulation.

node

The smallest unit of DOM is called a node. The document tree structure (DOM tree) is composed of various types of nodes, each node can be regarded as a leaf of the document tree. There are seven types of nodes

1. The Document; The top-level node of the entire document tree;
2. DocumentType: DocType tag (for example)
3. Element: The various HTML tags of a web page < for exampleThe < body >, < a >Etc.)
4. Attr: Attributes of web elements (such as cLass= “right”)
5. Text: Indicates the Text between labels or within labels
6. Comment: annotation
7. DocumentFragment: Indicates a fragment of a document

The browser provides a native Node object, Node. These seven nodes inherit from Node and therefore share common properties and methods.

Node in the tree

Depending on the hierarchy, this can be abstracted into a tree-like structure called a DOM tree. She has a top node, and the next layer is all the children of the top node, and then the children have their own children, and so on, a pyramid structure, like a tree. Browsers natively provide the Document node, which represents the entire Document.

• document
• // represents the entire document

The first layer of the document has two nodes, the first is the document type node (), and the second is the top-level container tag of the web page. The latter form the root node of the tree structure, and the other HTML tag nodes are its children. Except for the root node, all nodes have three hierarchies.

1. ParentNode: the parentNode directly;
2. ChildNodes: direct childNodes.
3. Sibling: Nodes that have the same parent node.

The DOM provides an operational interface to get the nodes of these three relationships.

For example, child interfaces include firstChild and lastChild attributes, and sibling interfaces include nextSibling and previousSibling attributes.

How does the Node interface work

DOM is a tree and Node is its leaves.

Work Background:

All DOM Node objects inherit the Node interface and share some common properties and methods, which are the basis of DOM manipulation.

The node.prototype. nodeType property returns the type of the Node

The nodeType property returns an integer value representing the type of the node. Document.nodetype //9 in the above code, the nodeType value of the document is 9. The Node object defines several constants that correspond to these types of values. Document.nodetype === node.document_node //true In the above code, the nodeType property of the document Node is equal to the constant node.document_node. The values and constants of the nodeType attribute for different nodes are as follows:

• Document Node (Document) : 9, corresponding to the constant node.document_node
• Element Node (Element) : 1, corresponding to constant node.element_node
• Attribute Node (attr) : 2, corresponding to the constant node. ATTRIBUTE_NODE
• Text: 3, corresponding to the constant node.text_node
• DocumentFragment Node: 11, corresponding to the constant node.document_fragment_node
• DocumentType Node (DocumentType) : 10, corresponding to the constant node.document_type_node
• Comment node (Comment) : 8, corresponding to the constant Node.COMMENT_NODE

Using the nodeType attribute is a common approach when determining the nodeType.

1. var node = document.documentElement.firstChild;
2. if (node.nodeType === Node.ELEMENT_NODE) {
3.   console.log('This node is an element node');
4. }
Copy the code

NodeName Returns the name of the Node

// The HTML code is as follows
// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeName // "DIV"

Copy the code

In the code above, the element node

// The HTML code is as follows
// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeValue // null
div.firstChild.nodeValue // "hello world"
Copy the code

// The HTML code is
// <div id="divA">This is <span>some</span> text</div>
document.getElementById('divA').textContent
// This is some text

Copy the code