All web front-end colleagues are very familiar with document.getElementById. During the development process, we often need to use it to obtain the element with the page ID of xx. Since the veteran JS library Prototype became popular, everyone likes to abbreviate it like this.
Copy the code code as follows:
// Method 1
function $(id){ return document.getElementById(id); }
Has anyone ever wondered why it is written this way instead of the following way?
Copy the code code as follows:
// Method 2
var $ = document.getElementById;
Writing $ this way is more concise and clear. Assign the document method getElementById to the variable $, and use $ to get the element with the page ID of xx. In fact, method 2 is feasible in IE6/7/8 (there are some changes in IE9), but not in Firefox/Safari/Chrome/Opera. Please also test it yourself.
Why can't Firefox/Safari/Chrome/Opera obtain it in method 2? The reason is that the internal implementation of the getElementById method in these browsers needs to rely on this (document), while IE does not need this. Or in other words, method 2 says that this is missing when called in Firefox/Safari/Chrome/Opera. The following is a simple example.
Copy the code code as follows:
//Define a function show
function show(){alert(this.name);}
//Define a p object with name attribute
var p = {name:'Jack'};
show.call(p); // -> 'Jack'
show(); // -> ''
show.call(null); // -> ''<BR>
You can see that the implementation of show relies on this (simply speaking, this is used in the method body). Therefore, if the environment (execution context) when calling does not have the name attribute, the expected result will not be obtained.
In other words, IE6/7/8 does not use this when implementing document.getElementById, but IE9/Firefox/Safari/Chrome/Opera needs to use this, where this is the document object. When method 2 is called directly, the internal this is the window object, so method 2 cannot obtain the element normally based on the ID in Firefox/Safari/Chrome/Opera.
If you change the execution environment of document.getElementById to document instead of window, you can use $ normally. as follows
Copy the code code as follows:
// Fix document.getElementById
document.getElementById = (function(fn){
return function(){
return fn.apply(document,arguments);
};
})(document.getElementById);
// After repair, assign value to $, $ can be used normally.
var $ = document.getElementById;
Again, the new bind method for function in ECMAScript5 can achieve the same effect.
Copy the code code as follows:
// Method 3
var $ = document.getElementById.bind(document);
But currently method 3 is only supported by IE9/Firefox/Chrome/.
After analyzing the situation of getElementById, it is easy to understand why the following methods differ in various browsers.
Copy the code code as follows:
var prinf = document.write;
prinf('<h3>Test prinf</h3>'); // IE6/7/8 can run, other browsers report errors
var prinfln = document.writeln;
prinfln('<h3>Test prinfln</h3>'); // IE6/7/8 can run, other browsers will report an error
var reload = location.reload;
reload(); // IE6/7/8 can run, other browsers will report an error
var go = history.go;
go(-2); // IE6/7/8 can run, other browsers will report an error