The DOM (Document Object model) allows us to use JavaScript to explore and manipulate the contents of an HTML document. It is an essential set of features for creating rich content.
1. Understanding the Document Object model
The DOM is a collection of objects that represent individual elements in an HTML document. As the name implies, the DOM is like a model that consists of many objects representing the document.
Let's start with an example of a simple HTML document:
<!DOCTYPE HTML><HTML><Head> <Metaname= "Author"content= "Luka" /> <Metaname= "description"content= "A Simple Example" /> <title>Example</title></Head><Body><P>your special not because you are in the business, not because you entered the cattle enterprise, not because of your cattle offer, but because you are you, firmly believe that their own special, firmly believe in their own heart, brave to do their own. <span>It doesn ' T MATTER where is, it MATTERS who is.</span></P><P>when I was 15 years old, I got the doll that I loved when I was 5 years old, and when I was 65 years old, when I finally had the money to buy a 25-year-old love dress, what was the point? Anything can start again, only youth can not. So many things, with youth tied together is good, leaving youth, is stupid. </P></Body></HTML>
You can see from the browser how the above sample HTML document is displayed:
As a step in the process of displaying an HTML document, the browser parses the HTML and creates a model. This model preserves the hierarchical relationships between each HTML element (as shown), and each element is represented by a single JavaScript object.
You can use the DOM to get document information, or you can modify it. This is the foundation of modern web applications.
Each object in a model consists of several properties and methods. When you use them to modify the state of an object, the browser causes the changes to be reflected on the corresponding HTML element, and the document is updated.
All DOM objects that represent elements support the same set of basic features: The HtmlElement object and its defined core functionality are always available, regardless of what element the object represents. In addition, some objects define some additional functionality. These actions reflect the unique nature of a particular HTML element. Any object in the document model that represents an element can support at least htmlelement functionality, some of which also support additional functionality.
Not all objects that are available for use represent HTML elements. Some objects represent the collection of elements, others represent the information of the DOM itself, and of course, the tin-plated document, which is the entrance to our exploration of the DOM.
2. Understanding DOM level and compatibility
DOM level is the version number in the normalization process and should be ignored in most cases.
The standardization of the DOM is not entirely successful, and each DOM level has standards and documentation that describe it, but they are not fully implemented, and the browser simply picks out the useful features and ignores the others. Worse still, there is some degree of inconsistency in the functionality that has been implemented.
Part of the problem is that the DOM specification was developed separately from the HTML standard in the past. HTML5 attempts to address this problem by including a set of DOM core functions that must be implemented. However, this practice has not yet been effective and fragmentation still exists.
There are several ways to achieve the variability of DOM functionality. The first approach is to use a JavaScript library (such as jquery), which eliminates differences in how browsers are implemented. The use of libraries is a bit of consistency, but the downside is that only those features supported by the library can be used. If you want to break through the limitations of the original function, you can only go back to the direct manipulation of the DOM and face the previous problem again.
The second is conservative: use only those features that you know are widely supported. This is generally the most sensible approach, but it requires careful and thorough testing. In addition, the new browser must be tested to ensure that support for these features is not numbered or removed.
Test DOM functionality
The third way is to test the existence of a DOM object property or method that is related to a feature. The following is a simple example:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Example</title></Head><Body><PID= "sentence"> <imgsrc= "Imgs/apple.png"alt= "Apple" /></P><Script> varimages; if(Document.queryselectorall) {images=Document.queryselectorall ("#sentence > IMG"); }Else{Images=document.getElementById ("sentence"). getElementsByTagName ("img"); } for (varI= 0; I<images.length; I++) {Images[i].style.border= "Thick solid black"; Images[i].style.padding= "4px"; }</Script></Body></HTML>
In this example, the script uses an if statement to determine whether the document object defines a method named Queryselectorall. If this statement evaluates to True, then the browser supports this feature and we can start using it. If the statement evaluates to False, the same can be achieved in a different way.
When it comes to DOM, what is often seen is a suggestion just now, but it is too hasty to point out the flaws, and these flaws can be serious.
The first flaw is that there is not always another way to achieve the effect of a given feature. This example code can function well because the functionality of the test is a convenient form of reinforcement for other functions, but this is not always the case.
The second flaw is that it only tests the existence of the feature, not its implementation quality and consistency. Many features, especially new features, require multiple versions of the browser to stabilize and achieve consistency. Although this problem is not as serious as it used to be, it may be easy to encounter unexpected results because of the differences in the way browsers are dependent on their implementation.
The third flaw is the need to test each of the functions on which it depends. It takes a lot of effort to do this, and the resulting code is riddled with endless tests. This is not to say that it is not a useful test, but rather that it is flawed and should not replace the appropriate test.
Using the DOM to understand the DOM
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
