A line of code says goodbye to document. getElementById

Source: Internet
Author: User

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.