Analysis of differences in the implementation of document.getElementById and other methods by various browsers_javascript skills

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 code The code is as follows:

// Method 1
function $(id){ return document.getElementById(id); }

Is there any Have you ever thought about why you write it this way instead of the following way?

Copy code The code is as follows:

// Method 2
var $ = document. getElementById;

Writing $ like this 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 is Firefox/Safari/Chrome/Opera not able to obtain it through 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 require this. In other words, method 2 says that this is missing when calling in Firefox/Safari/Chrome/Opera. The following is a simple example

Copy code The code is 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); // -> ''

You can see that the implementation of show relies on this (simply speaking, this is used in the method body), so If there is no name attribute in the calling environment (execution context), the expected results 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 The code is as follows:

// Fix document.getElementById
document. getElementById = (function(fn){
return function(){
return fn.apply(document,arguments);
};
})(document.getElementById);

// After repair, assign the value to $, and $ can be used normally
var $ = document.getElementById;

Again, the new bind method for function in ECMAScript5 can achieve the same effect

Copy code The code is 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, the reasons for the differences between the following methods in various browsers are easy to understand

Copy code The code is as follows:

var prinf = document.write;
prinf('

Test prinf

'); // IE6/7/8 can run, Other browsers report errors

var prinfln = document.writeln;
prinfln('

Test prinfln

'); // IE6/7/8 can run, other browsers report errors

var reload = location.reload;
reload(); // IE6/7/8 can run, other browsers report errors

var go = history.go;
go(-2); // IE6/7/8 can run, other browsers report errors