What is DOM (Document Object Model) document object model_DOM

D:document The page loaded by the document browser

DOM O:object object page and any element in the page are objects

M:module Elements in the model page The organizational form

DOM is designed by the W3C organization as a platform-independent and language-independent API through which programs or scripts can dynamically access and modify the content, style, and structure of the document.

DOM is the operating specification of web browsers. With the help of DOM, JavaScript has achieved its status as a web standard language and achieved the so-called "write once and run anywhere" goal in the web field.


The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and can change the content and presentation of the document. What we are most concerned about is that the DOM connects web pages with scripts and other programming languages.

Script developers can control, manipulate and create dynamic web page elements through the properties, methods and events of the document object. Each web page element (an HTML tag) corresponds to an object (object, the so-called "object" means "thing" in vernacular. The word object is usually translated as "object" in Taiwan). The tags on the web page are nested layer by layer, and the outermost layer is . The document object model is also nested layer by layer, but it is usually understood as the shape of a tree. The root of the tree is the window or document object, which is equivalent to the periphery of the outermost label, that is, the entire document. Under the root of the tree (the tree is usually drawn upside down, like a genetic pedigree or a family tree. The root is the only common ancestor) are sub-level objects, which also have their own sub-objects, in addition to the root Except for objects, all objects have their own parent objects, and the relationship between child objects of the same object is brotherhood.

In this "parthenogenous family tree" frame structure composed of "father, son and brother", each web page element can be accurately positioned. The document object model organizes the entire web page into such a tree structure, and each element in the tree structure is regarded as a node. Various programming languages, including JavaScript, can access and change various details of web pages through the document object model.

The World Wide Web Consortium (W3C) has developed a series of standards for the Document Object Model, and is developing more related standards. In addition to supporting some of these standards, contemporary browsers also support some historical and established programming interfaces that were popular before the W3C standards were formulated. In other words, the history of the technologies used by browsers today is complicated, and some DOM technologies commonly used by people have no standards to follow.

We will go into the details of all common DOMs (including some technologies that are "different" in IE browser) to fully grasp the practice-oriented technology.


DOM and JavaScript

95% of the “JavaScript-related” questions I often get asked on QQ, MSN and email are actually about DOM problem. People habitually don’t like to talk about DOM, either talking about JavaScript, or talking about “Ajax” (a once popular “concept”, which has just cooled down recently, just like “DHTML” at the end of the last century. Regarding the emergence of these hot words , I am personally very happy, because every time it brings people's enthusiasm for JavaScript technology. What is the next hot word? Maybe we can concoct one... Pseudo-Mashup, how about it?

All operations we perform on web pages using JavaScript are performed through the DOM. The DOM belongs to the browser and is not the core content specified in the JavaScript language specification. Therefore, if you download a JavaScript language reference help document and check it, you will not be able to find even the document.write method that is well known to women and children.

The function of the following code is to use a prompt box to display the URLs of all links in the web page one by one. The part marked in red in the code is the DOM.

In this way, it will be clear at a glance which is the core JavaScript, which is the DOM, and what role each plays.

var anchorTags =
Creates a JavaScript variable named anchorTags.

document.getElementsByTagName("a")
Document interface is the first interface defined in the DOM1 Core specification, and document is a host object that implements the Document interface. The document controls everything on the web page.
DOM1 core defines the getElementsByTagName() method for the Document interface. This method returns a node list (NodeList), which is a DOM-specific array containing nodes, including all tags that meet the matching parameter conditions, arranged in the order they appear in the document. So the anchorTags variable now becomes a list of nodes.

;
The semicolon is the end of statement symbol in JavaScript.

for (var i = 0; i <
This is a typical "for loop" in programming languages. The loop variable i is declared and each node in the anchorTags node list is processed one by one. This is also JavaScript stuff.

anchorTags.length
DOM1 core defines the length attribute of the NodeList interface. This attribute returns an integer, which is the number of nodes contained in the node list. Speaking of which, JavaScript arrays also have a length attribute. .

; i ) {
Typical JavaScript variable increment operation.

alert(
alert() is a DOM method that pops up a prompt box to display the parameters (strings) passed to the method. This thing is commonly known as DOM level 0 (DOM level 0) or DOM0 is one of the established programming interfaces in history. DOM0 is a set of programming interfaces "supported by some browsers" (in fact, there are no browsers on the market that do not support DOM0, only in some software hobbies).

"Href of this a element is: "
A string literal and a string linker. .

anchorTags[i].href
href is an attribute of the HTMLAnchorElement interface defined in the DOM1 HTML specification, returning the value of the href attribute of the link () element. Here we use a usage like anchorTags[i], which is the same as the syntax for accessing the i-th array item in JavaScript, the so-called "DOM way" access that is language-neutral (regardless of the specific language). The way to access an item in a node list is to use the item() method defined in the NodeList interface: anchorTags.item(1).href, but most JavaScript implementations allow you to use this simple array-like method. syntax, and this is what most people actually use.

"n");
Another string concatenation. Adds a carriage return character to the end of the string.

}
The "for loop" ends.