Table of contents
Today we will learn about an important concept in WEB programming, the DOM (Document Object Model) document object model, which helps us manipulate documents using JavaScript (or other programming languages).
1. What is DOM
Many people will ask what exactly is DOM? In fact, DOM is the programming interface of HTML and XML documents. It is different from displaying html source code as a page in a browser window or using a text editor as plain text. It is another structured representation of the document. DOM parses all nodes of the document into an object, and provides some properties and methods to describe them.
According to the W3C DOM specification, DOM is the application programming interface (API) of HTML and XML, and DOM maps the entire page into a file composed of hierarchical nodes. DOM is the abbreviation of document object model (document object model), which is a model that provides methods to access or modify documents. A technique for accessing and modifying html documents by browsers, but in fact the scope is far from limited here.
DOM is a W3C standard. It is divided into 3 parts:
- Core DOM: the standard model for any structured document
- XML DOM: a standard model for XML documents
- HTML DOM: a standard model for HTML documents
Core DOM: shared interface for XML and HTML; XMLDOM: XML-specific interface; HTML DOM: HTML-specific interface;
DOM is not a programming language, it is a standard, a model, which is relatively independent from the programming language. All programming languages can access and process documents according to this model.
Note: Because we are mainly learning WEB programming, the DOM mentioned in the next article refers to HTML DOM, and the DOM API used is also implemented by JavaScript scripting language.
Two, DOM access
We know that various browsers have different implementations of JavaScript, so there will be some differences when they implement the DOM standard, but since they all follow the standard, they show different degrees of consistency. When we use DOM, we don't need to do any special operations. If we encounter differences (mainly reflected in method names and parameters), we only need to use the relevant methods implemented by them according to different browsers. In fact, their implementation follows a unified standard.
DOM treats documents as a tree structure:
- The entire document is a document node.
- Each HTML tag is an element node.
- Text contained within HTML elements are text nodes.
- Every HTML attribute is an attribute node.
- Comments belong to comment nodes.
All nodes in an HTML document make up a document tree (or node tree). Each element, attribute, text, etc. in an HTML document represents a node in the tree. The tree starts at the document node and continues to branch out to all the text nodes at the lowest level of the tree.
Through this node tree, JavaScript can easily access and manipulate these nodes. Each node obtained by Javascript is parsed into an object. In DOM, document is the top-level object, and most of the attributes and methods of DOM elements come from this.
◼️ Take a chestnut: Please see the following HTML document:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>All of the nodes above have relationships with each other.
Every node except the document node has a parent node. For example, the parent node of <head> and <body> is the <html> node, and the parent node of the text node "Hello world!" is the <p> node.
Most element nodes have child nodes. For example, the <head> node has one child: the <title> node. The <title> node also has a child node: the text node "DOM Tutorial".
Nodes are siblings (sibling nodes) when they share the same parent node. For example, <h1> and <p> are siblings because their parents are both <body> nodes.
Nodes can also have descendants, which are all children of a node, or children of those children, and so on. For example, all text nodes are descendants of the <html> node, and the first text node is a descendant of the <head> node.
Three, DOM node type
Each node object has a nodeType, nodeName and nodeValue attributes, through the values of these attributes, we can get the relevant information of the node:
| nodeType returns the node type | nodeName returns | nodeValue returns | |
|---|---|---|---|
| 1 | Element | element name | null |
| 2 | Attr | attribute name | attribute value |
| 3 | Text | #text | the content of the node |
| 4 | CDATASection | #cdata-section | the content of the node |
| 5 | EntityReference | entity reference name | null |
| 6 | Entity | entity name | null |
| 7 | ProcessingInstruction | target | the content of the node |
| 8 | Comment | #comment | comment text |
| 9 | Document | #document | null |
| 10 | DocumentType | Document type name | null |
| 11 | DocumentFragment | #document snippets | null |
| 12 | Notation | symbol name | null |
4. Classification of DOM
DOM classification is only for understanding. The levels of the DOM are classified as follows:
Level 1 DOM (DOM Level 1)
Level 1 DOM became a W3C recommended standard in October 1998 and consists of two modules: DOM Core and DOM HTML. The DOM core can map XML-based document structures, allowing access to and manipulation of arbitrary parts of the document. DOM HTML extends the DOM core by adding HTML-specific objects and functions. In simple terms, DOM1 level is to map the document structure and provide basic document operation methods.
Secondary DOM (DOM Level 2)
Level 2 DOM extends Level 1 DOM by introducing several new DOM modules to handle new interface types:
- DOM Views: Describes the interface for tracking various views of a document (before and after styling the document using CSS styles);
- DOM event: describe the event interface;
- DOM style: describe and process the interface based on CSS style;
- DOM Traversal and Scope: Describes the interface for traversing and manipulating the document tree; according to the DOM, each component in an HTML document is a node
DOM level 2 is to extend DOM level 1. Level 2 DOM adds support for mouse and user interface events (DHTML supports mouse and user interface events for a long time), scope, traversal (repeated execution of DOM documents) and cascading style sheets (CSS) through object interfaces. support. It also extends DOM1 to support XML namespaces. To put it simply, DOM2 level is to add views, events, styles, traversal and scope interfaces on the basis of DOM1, and support XML namespaces.
Three-level DOM (DOM Level 3)
Level 3 DOM further expands the DOM by introducing a unified way to load and save documents and document validation methods. DOM3 includes a new module called "DOM Loading and Saving". After the DOM core is extended, it can support all content of XML1.0 , including XML Infoset, XPath, and XML Base.
DOM3 level, on the basis of the previous DOM, introduces the method of loading and saving documents in a unified way, adds a method of verifying documents, and also expands the DOM core to support the XML1.0 specification.
Zero-level DOM (DOM Level 0)
Level 0 DOM does not really exist. The industry usually refers to DOM before W3C standardization as level 0 DOM.
In fact, in addition to the above three levels, there is also a thing called DOM0 level. In fact, the standard does not have this thing. It refers to the DHTML originally supported by IE4 and Netscape Navigator 4.0. DHTML is actually HTML, CSS and An integration of JS represents an existing technology, not a standard, so DOM0 level actually represents an initial product that has not formed a standard in the historical node.
To give a common comparison between DOM0-level events and DOM2-level events: the onclick assignment of a bound button is a function at DOM0 level, but onclick assigns different functions multiple times, and will eventually be overwritten by subsequent functions; while DOM2-level uses The provided addEventListener method listens to the click event of the button. If you write and listen to the same event multiple times, the functions will be executed in sequence and will not be overwritten.
◼️ References
Quickly understand JavaScript's DOM model - Zhihu | DOM Level Classification - Short Book
What are the main contents of DOM | DOM classification_essays_memory overflow
