Home > Developer > JavaScript
Therefore, most scripts directly access the DOM through the element id.
Later, with the advent of various browsers, ie was gradually replaced. Standardization is becoming more and more important to ensure the unified rules of various schools. The method for directly accessing the id was gradually replaced by document. getElementById. If you are still using id to access elements this year, you can either build embedded web pages in the program, or create a super-realm antique website like the Ministry of Railways. :) of course, as long as you ensure that all your users are using ie for access, this is not a standard, but it is useless.
However, many third-party browsers keep the non-standard method of using id to access DOM to ensure compatibility with a large number of non-standard pages at the time. In fact, only FireFox does not support mainstream browsers today. Chrome, Opera, Safari, and Mobile Safari all support this approach.
In this case, it is better to make FireFox support, so that all browsers can directly access the DOM with IDs, which is not only quick and convenient, reduces the cumbersome code, but also improves the running efficiency.
The implementation is very simple. After the document is loaded, it queries the elements with the id attribute, and then adds its reference to the window object:
Copy codeThe Code is as follows:
Var list = document. querySelectorAll ('[id]');
For (var I = 0; I <list. length; I ++)
{
If (list [I]. id)
Window [list [I]. id] = list [I];
}
Of course, only FF needs this hack, so we should first check whether it has its features. Finally, we can compress the code to a simple row by using the array traversal callback:
Copy codeThe Code is as follows:
<Script>
If ('mozhidden 'in document) []. forEach. call (document. querySelectorAll ('[id]'), function (k) {this [k. id] = k });
</Script>
However, it is worth noting that querySelectorAll can only be used to query elements before the file is loaded. Therefore, the above Code must be placed at the end of the document. Access by id must also be completed after the document is loaded; otherwise, this element may not be found. The following is a test page, which passes in all browsers:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> No document. getElementById </title>
</Head>
<Body>
<Div id = "mytag"> </div>
<Script>
Onload = function ()
{
Mytag. innerHTML = "Goodbye, document. getElementById! ";
}
</Script>
<Script>
If ('mozhidden 'in document) []. forEach. call (document. querySelectorAll ('[id]'), function (e) {self [e. id] = e });
</Script>
</Body>
</Html>
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
