D: document The page loaded by the browser
DOM O:object object The page and any element in the page are objects
M:module Model The organization form of elements in the page
DOM is designed by W3C as a platform-independent, language-independent API through which programs or scripts dynamically access and modify the content, style and structure of documents.
DOM is the running specification of web browsers. Javascript has achieved its position as a standard web language with the help of DOM and achieved the so-called goal of "writing and running everywhere" in the web field.
Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation method for documents that can change the content and presentation of documents. What we care most about is that DOM connects web pages with scripts and other programming languages.
Script developers can control, manipulate and create dynamic web elements through the properties, methods, and events of document objects. Each web element (an HTML tag) corresponds to an object (object, the so-called "object", in vernacular, is "things". The word object is usually translated as "object" in *). The tags on the web page are nested layer by layer, and the outermost layer is <HTML>. 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 a window or document object, which is equivalent to the outermost label, which is the entire document. Below the root of the tree (the tree's diagram is usually drawn upside down, just like the genetic lineage or family tree. The root of the tree is the only common ancestor) is a child-level object, and the child object also has its own child object. Except for the root object, all objects have their own parent object, and the child objects of the same object are brotherly relationships.
In this "unisexual reproductive family map tree" framework structure composed of "father, son, brother", each web element can be precisely positioned. The document object model organizes the entire web page into a tree-like 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 set a series of standards for document object models and is developing more relevant standards. In addition to supporting some of these standards, contemporary browsers also support some historically established programming interfaces that were popular long before the W3C standard formulation. In other words, the history of browser use now has been complicated and some DOM technologies commonly used by people have no standards to follow.
We will dig into the details of all common DOMs (including some of the technologies that are “different” in IE browsers) to fully master practice-oriented techniques.
DOM and JavaScript
95% of the questions I often ask about "JavaScript" in QQ, MSN and email are actually DOM problems. People don’t like to talk about DOM in habit, either talk about JavaScript or talk about “Ajax” (a once popular “concept” that has just cooled down recently, just like “DHTML” at the end of the last century. I personally feel very pleased with the emergence of these hot words, because every time it brings people’s popularity with JavaScript technology. What is the next hot word? Maybe we can fabricate one, maybe...Pseudo-Mashup, how?).
All the operations we do with JavaScript on web pages are done through DOM. DOM belongs to the browser, not the core content specified in the JavaScript language specification, so if you download a JavaScript language reference help document to check it, you can't even find the known method.
The purpose 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.
var anchorTags = ("a");
for (var i = 0; i < ; i++)
{
alert("Href of this a element is : " + anchorTags[i].href + "\n");
}
In this way, we can see which JavaScript is core, which is DOM, and what role each plays at a glance.
var anchorTags =
A JavaScript variable named anchorTags is created.
("a")
The 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 NodeList, which is a DOM-specific array containing nodes, containing all tags that meet the matching parameter conditions, and are arranged in the order they appear in the document. So the anchorTags variable now becomes a node list.
;
The semicolon is the ending symbol of the statement in JavaScript.
for (var i = 0; i <
This is a typical "for loop" in programming languages. The loop variable i is declared to process each node in the anchorTags node list one by one. This is also something about JavaScript.
DOM1 core defines the length property of the NodeList interface. This property returns an integer, which is the number of nodes contained in the node list. Speaking of JavaScript arrays, there is also a length attribute.
; i++) {
Typical JavaScript variable increment operation.
alert(
alert() is a DOM method, and a prompt box pops up to display the parameters (string) passed to the method. By the way, this thing is a member of some historically established programming interfaces commonly known as DOM level 0 or DOM0. DOM0 is a set of programming interfaces that are "supported by certain browsers" (in fact, there are no browsers that do not support DOM0 on the market, and can only be seen in the collections of some software enthusiasts), and does not belong to any DOM standard specification.
"Href of this a element is : " +
A string literal and a string linker. JavaScript stuff.
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 (<a>) element.
Here we use usage like anchorTags[i], which is the same syntax for accessing the i-th array item in JavaScript. The so-called "DOM method" of language-neutral (language-neutral, irrelevant to the specific language) way to access an item in a node list is to use the item() method defined in the NodeList interface: (1).href. But most JavaScript implementers allow you to use this simple array-like syntax, which is the way most people actually use.
+ "\n");
Another string concatenation. Add a carriage return to the end of the string.
}
The "for loop" ends.
DOM O:object object The page and any element in the page are objects
M:module Model The organization form of elements in the page
DOM is designed by W3C as a platform-independent, language-independent API through which programs or scripts dynamically access and modify the content, style and structure of documents.
DOM is the running specification of web browsers. Javascript has achieved its position as a standard web language with the help of DOM and achieved the so-called goal of "writing and running everywhere" in the web field.
Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation method for documents that can change the content and presentation of documents. What we care most about is that DOM connects web pages with scripts and other programming languages.
Script developers can control, manipulate and create dynamic web elements through the properties, methods, and events of document objects. Each web element (an HTML tag) corresponds to an object (object, the so-called "object", in vernacular, is "things". The word object is usually translated as "object" in *). The tags on the web page are nested layer by layer, and the outermost layer is <HTML>. 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 a window or document object, which is equivalent to the outermost label, which is the entire document. Below the root of the tree (the tree's diagram is usually drawn upside down, just like the genetic lineage or family tree. The root of the tree is the only common ancestor) is a child-level object, and the child object also has its own child object. Except for the root object, all objects have their own parent object, and the child objects of the same object are brotherly relationships.
In this "unisexual reproductive family map tree" framework structure composed of "father, son, brother", each web element can be precisely positioned. The document object model organizes the entire web page into a tree-like 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 set a series of standards for document object models and is developing more relevant standards. In addition to supporting some of these standards, contemporary browsers also support some historically established programming interfaces that were popular long before the W3C standard formulation. In other words, the history of browser use now has been complicated and some DOM technologies commonly used by people have no standards to follow.
We will dig into the details of all common DOMs (including some of the technologies that are “different” in IE browsers) to fully master practice-oriented techniques.
DOM and JavaScript
95% of the questions I often ask about "JavaScript" in QQ, MSN and email are actually DOM problems. People don’t like to talk about DOM in habit, either talk about JavaScript or talk about “Ajax” (a once popular “concept” that has just cooled down recently, just like “DHTML” at the end of the last century. I personally feel very pleased with the emergence of these hot words, because every time it brings people’s popularity with JavaScript technology. What is the next hot word? Maybe we can fabricate one, maybe...Pseudo-Mashup, how?).
All the operations we do with JavaScript on web pages are done through DOM. DOM belongs to the browser, not the core content specified in the JavaScript language specification, so if you download a JavaScript language reference help document to check it, you can't even find the known method.
The purpose 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.
Copy the codeThe code is as follows:
var anchorTags = ("a");
for (var i = 0; i < ; i++)
{
alert("Href of this a element is : " + anchorTags[i].href + "\n");
}
In this way, we can see which JavaScript is core, which is DOM, and what role each plays at a glance.
var anchorTags =
A JavaScript variable named anchorTags is created.
("a")
The 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 NodeList, which is a DOM-specific array containing nodes, containing all tags that meet the matching parameter conditions, and are arranged in the order they appear in the document. So the anchorTags variable now becomes a node list.
;
The semicolon is the ending symbol of the statement in JavaScript.
for (var i = 0; i <
This is a typical "for loop" in programming languages. The loop variable i is declared to process each node in the anchorTags node list one by one. This is also something about JavaScript.
DOM1 core defines the length property of the NodeList interface. This property returns an integer, which is the number of nodes contained in the node list. Speaking of JavaScript arrays, there is also a length attribute.
; i++) {
Typical JavaScript variable increment operation.
alert(
alert() is a DOM method, and a prompt box pops up to display the parameters (string) passed to the method. By the way, this thing is a member of some historically established programming interfaces commonly known as DOM level 0 or DOM0. DOM0 is a set of programming interfaces that are "supported by certain browsers" (in fact, there are no browsers that do not support DOM0 on the market, and can only be seen in the collections of some software enthusiasts), and does not belong to any DOM standard specification.
"Href of this a element is : " +
A string literal and a string linker. JavaScript stuff.
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 (<a>) element.
Here we use usage like anchorTags[i], which is the same syntax for accessing the i-th array item in JavaScript. The so-called "DOM method" of language-neutral (language-neutral, irrelevant to the specific language) way to access an item in a node list is to use the item() method defined in the NodeList interface: (1).href. But most JavaScript implementers allow you to use this simple array-like syntax, which is the way most people actually use.
+ "\n");
Another string concatenation. Add a carriage return to the end of the string.
}
The "for loop" ends.