One of the challenges with working with HTML DOM documents is that JavaScript can be executed before the DOM is fully loaded, which can cause a lot of potential problems for your code. The rendering and operation order of the browser is outlined in the following list:
HTML parsing complete
External scripts and style sheets loaded complete
The script parses and executes within the document
The HTML Dom is completely constructed.
Picture and external content loading
Web page completes loading
Scripts that are loaded at the head of a Web page and from external files are executed before the HTML is actually constructed. As mentioned earlier, this is a critical issue, because the scripts executed in both places do not have access to the DOM that does not yet exist. Fortunately, we still have a number of remedial measures.
Currently, the most commonly used series is to wait for the entire page to load completely before performing DOM operations. This technique simply uses the Window object's Load event to bind a function, which can be triggered when the page is loaded.
Copy Code code as follows:
addevent (window, "Load", function () {
Do something
});
The simplest operation is the slowest. In the order list of the loading process, you will notice that the page is loaded or not fully controlled by the last step. This means that if the page has a lot of pictures, videos, and so on, the user may have to board for a while before JavaScript executes.
Another series can be used to listen to the DOM load state, possibly the most complex (from an implementation standpoint), but also most effectively.
This technique checks the HTML DOM document as quickly as possible without blocking the browser's loading to see if the properties required for execution have already been loaded. Here are a few key points to check whether the HTML DOM is available:
Document: You need to know if the DOM document is already loaded. If you can check it quickly enough, you'll see undefined if you're lucky.
document.getElementsByTagName and document.getElementById: frequently use the document.getelementsbytagname and document.getElementById functions to check documents when there are These functions indicate that the DOM has finished loading.
Document.body: As an additional addition, check that the element is fully loaded. In theory the previous examination should have been able to make a judgment, but I have found that some cases are not enough.
Using these checks is sufficient to determine whether the DOM is available ("Enough" to indicate that there may be a millisecond-time lag). This method is almost flawless. Using the preceding check alone, the script should be able to run relatively well in modern browsers. However, recent (2008) Firefox has implemented cache improvements that allow window load events to actually be triggered before the script can check whether the DOM is available. To be able to play this advantage, I also load event checks for the window, with a view to achieving faster execution speed.
Finally, the Domready function aggregates all references to functions that need to be executed when the DOM is available. Once the DOM is considered available, these references are invoked and executed in order one by one.
Copy Code code as follows:
Functions that listen for the DOM is available
function Domready (f) {
If the DOM is already loaded, Mashan executes the function
if (Domready.done) return F ();
If we have added a function
if (Domready.timer) {
Put it in the list of functions to be executed
DomReady.ready.push (f);
} else {
When the page is loaded, bind an event to prevent it from being completed first.
addevent (window, "load", isdomready);
Initializes an array of execution functions
Domready.ready = [F];
Check if the DOM is available as soon as possible
Domready.timer = SetInterval (Isdomready, 13);
}
}
Check to see if the DOM is operational
function Isdomready () {
If we can judge that Dom is possible, ignore
if (Domready.done) return false;
Check that several functions and elements are possible
if (document && document.getelementsbytagname && document.getElementById && document.body) {
If available, we stop checking
Clearinterval (Domready.timer);
Domready.timer = null;
Execute all the waiting functions
for (var i = 0; i < domReady.ready.length; i++) {
Domready.ready[i] ();
Record we've done here
Domready.ready = null;
Domready.done = true;
}
}
}
Now let's take a look at how the HTML document is executed. Suppose you have written the Domready function to an external file named Domready.js
Copy Code code as follows:
<title> Testing DOM loading</title>
<script src= "Domready.js" ></script>
<script>
Domready (function () {
Alert ("The DOM is loaded!");
Do something
});
</script>
<body>
<!--Here are a lot of HTML-->
</body>
