DOM overview


DOM is the interface for JavaScript to manipulate web pages, and it is called the "Document Object Model" (Document Object Model). Its function is to convert a web page into a JavaScript object, so that various operations (such as adding and deleting content) can be performed with scripts.

According to the DOM model, the browser parses structured documents (such as HTML and XML) into a series of nodes, and then these nodes form a tree structure (DOM Tree). All nodes and the final tree structure have standardized external interfaces.

DOM is just an interface specification, which 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 most commonly used language for DOM manipulation. What follows is the implementation and usage of the DOM standard by JavaScript.


The smallest unit of DOM is called a node. The tree structure of the document (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.

-Document: the top node of the entire document tree -DocumentType: doctype tag (such as <!DOCTYPE html>) -Element: various HTML tags of the webpage (such as <body>, <a>, etc.) -Attr: the attributes of web page elements (such as class="right") -Text: The text between or contained within tags -Comment: Comment -DocumentFragment: Fragment of the document

The browser provides a native node object Node, the above seven kinds of nodes all inherit Node, so they have some common properties and methods.

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 nodes 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 is like a tree.

The browser natively provides the document node, which represents the entire document.

// The entire document tree

The first level of the document has two nodes, the first is the document type node (<!doctype html>), and the second is the top-level container tag <html> of HTML pages. The latter constitutes the root node of the tree structure, and other HTML tag nodes are its subordinate nodes.

Except for the root node, other nodes have three hierarchical relationships.

-The parent node relationship (parentNode): the direct parent node -Child Nodes (childNodes): direct subordinate nodes -Sibling: Nodes that have the same parent node

DOM provides operation interfaces to obtain the nodes of these three relationships. For example, the child node interface includes attributes such as firstChild (the first child node) and lastChild (last child node), and the sibling node interface includes nextSibling (the sibling node immediately after) and previousSibling (The sibling node immediately before) attribute.