Hello everyone, the editor is here to answer the following questions for you, common attributes of dom nodes in js, dom and bom in javascript, let us take a look now!
1. What is DOM
DOM is the interface for JavaScript to operate web pages, and its full name is "Document Object Model". Its function is to convert the web page into a JavaScript object, so that various operations can be performed using scripts. python for statement usage .
The browser will parse structured documents (such as HTML and XML) into a series of nodes based on the DOM model, and then form a tree structure (DOM Tree) from these nodes. All nodes and the final tree structure have standardized external interfaces.
DOM is just an interface specification that can be implemented in various languages. So strictly speaking, DOM is not part of JavaScript syntax, but DOM manipulation is the most common task of JavaScript. Without DOM, JavaScript cannot control web pages. On the other hand, JavaScript is also the language most commonly used for DOM manipulation.
2. Node
2.1 What is a node
The smallest component unit of DOM is called node. The tree structure of the document (DOM tree) is composed of various types of nodes. Each node can be viewed as a leaf of the document tree.
2.2 Types of nodes
The browser provides a native node object Node. The following seven nodes all inherit Node and therefore have some common properties and methods.
| type | illustrate |
| Document | The top node of the entire document tree |
| DocumentType | DOCTYPE statement |
| Element | Various tags in HTML documents |
| Attribute | Properties of various tags in HTML documents |
| Text | Text between or within tags |
| Comment | Comment |
| DocumentFragment | fragment of HTML document |
3. Node tree
3.1 What is a node tree
All nodes of a document can be abstracted into a tree structure according to their level. This tree structure is the DOM tree. It has a top-level node, and the next level is the child node of the top-level node, and then the child nodes have their own child nodes. In this way, a pyramid structure is derived layer by layer, which looks like a tree upside down.
The browser natively provides the document node, which represents the entire document.
3.2 Hierarchical relationship between nodes
Except for the root node, other nodes have three hierarchical relationships.
| relation | illustrate |
| Parent node relationship (parentNode) | direct superior node |
| Child node relationship (childNodes) | direct subordinate node |
| Sibling node relationship (sibling) | Nodes with the same parent node |
4. Node.nodeType attribute
The nodeType attribute returns an integer value indicating the type of node.
| node | value | constant |
| document (document node) | 9 | Node.DOCUMENT_NODE |
| Element (element node) | 1 | Node.ELEMENT_NODE |
| Attr (attribute node) | 2 | Node.ATTRIBUTE_NODE |
| Text (text node) | 3 | Node.TEXT_NODE |
| Comment (comment node) | 8 | Node.COMMENT_NODE |
| DocumentType (document type node) | 10 | Node.DOCUMENT_TYPE_NODE |
| DocumentFragment (document fragment node) | 11 | Node.DOCUMENT_FRAGMENT_NODE |
console.log(document.nodeType); // 9
console.log(Node.DOCUMENT_NODE); // 9
if (document.nodeType === Node.DOCUMENT_NODE) {
console.log("equal");
} // equal