Home > Article > Web Front-end > One line of code says goodbye to document.getElementById_javascript trick
One line of code says goodbye to document.getElementById_javascript trick
- WBOYOriginal
- 2016-05-16 17:52:511385browse
Therefore, in most scripts, the DOM is accessed directly through the id of the element.
Later, as various browsers came one after another, they gradually replaced IE. In order to ensure that all sects have unified rules, standardization is increasingly valued. The original method of directly accessing the id was gradually replaced by document.getElementById. If you are still using ID to access elements these days, you will either have to make an embedded web page in the program, or use a super-realm antique website like the Ministry of Railways:) Of course, as long as you make sure that your users use IE to access, such non-standard But it doesn’t hurt to use it.
However, when many third-party browsers first came out, in order to ensure compatibility with a large number of non-standard pages at that time, they retained the non-standard practice of using ID to access the DOM. In fact, among today's mainstream browsers, only FireFox does not support this approach, while Chrome, Opera, Safari, and Mobile Safari all support it.
In this case, we might as well let FireFox also support it, so that all browsers can directly access the DOM using the ID. It is not only fast and convenient, but also reduces cumbersome code and improves operating efficiency.
The implementation is very simple. After the document is loaded, query the element with the id attribute, and then add its reference to the window object:
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 first check whether it has its characteristics. Finally, streamline the code and use the array traversal callback to compress it into a simple line:
<script> <br>if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(k){this[k.id] =k}); <br></script>
But there is something worth noting. Before the document loading is completed, querySelectorAll can only query the elements before the current <script> . So the above code must be placed at the end of the document. Access using id must also be done after the document is loaded, otherwise the element may not be found. The following is a test page, which passes in all browsers: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="17236" class="copybut" id="copybut17236" onclick="doCopy('code17236')"><u>Copy code </u></a></span> The code is as follows: </div> <div class="codebody" id="code17236"> <br><!DOCTYPE html> <br><html> <br><head> <br><title>No document.getElementById</title> <br></head> <br><body> ; <BR><div id="mytag"></div> <br><script> <br>onload = function() <br>{ <br>mytag.innerHTML = "Goodbye, document. getElementById!"; <br>} <br></script>
<script> <br>if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]' ),function(e){self[e.id]=e}); <br></script>