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.
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 -
doctype tag (such as
<!DOCTYPE html>) -
Element: various HTML tags of the webpage (such as
<a>, etc.) -
Attr: the attributes of web page elements (such as
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.
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.
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.