document.getElementById介绍

 更新时间:2011年09月13日 23:27:32   作者:   我要评论

经常使用document.getElementById,但对于更详细的细节可以参考下。
把你的大脑当做浏览器执行下面的代码两次,分别是IE6和IE9:
复制代码 代码如下:

function testFunc(){
alert('test')
}
$(function(){
var g = document.getElementById ,
w = window.testFunc ;
//g
alert(typeof(g));
alert(String(g));
alert(g instanceof Object);
alert(g instanceof Function);
//w
alert(typeof(w));
alert(String(w));
alert(w instanceof Object);
alert(w instanceof Function);
//执行
alert(g('t'));
w();
});

在标准浏览器中(IE9、FF、chrome等)上述代码执行得非常一致,返回结果如下:
typeof => "function"
复制代码 代码如下:

String => "function #funcName#{[native code]}"
instanceof Object => true
instanceof Function => true

很奇怪,虽然类型是函数,但是我们却不能直接使用括号来执行函数g,而需要使用call

g.call(document,elementId);
但是如果运行环境是IE6,一切看起来非常诡异,下面是运行结果(注意粗体部分):
复制代码 代码如下:

//g
typeof => "object"
String => "function getElementById{[native code]}"
instanceof Object => false
instanceof Function => false
//w
typeof => "function"
String => "function testFunc{alert('test')}"
instanceof Object => true
instanceof Function => true


在IE 6下,对于g和w都只能使用括号直接执行函数,而不需要使用call。对于函数g使用下面的方式调用会导致一个“对象没有该属性”的错误:
g.call(document,eleId)
在IE6下,对于自定义的函数testFunc测试结果没有任何问题,但是对于g却十分地诡异!

既然g是object那么为何可以像函数一样用()直接调用执行?
而在标准浏览器中,g既然是函数为什么却不能直接使用()来执行呢?
事实上对于document.getElementById,它到底是function还是object就连jQuery 1.6.2也没有解决这个问题。
在IE6中$.isFunction(g)仍然返回的是false!下面是jQuery 1.6.2的jQuery.isFunction的相关源代码:

复制代码 代码如下:

class2type={};
...
// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {
class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
...
type: function( obj ) {
return obj == null ?
String( obj ) :
class2type[ Object.prototype.toString.call(obj) ] || "object";
},
...
isFunction: function( obj ) {
return jQuery.type(obj) === "function";
}

于是在StackOverflow上提了这个问题,好在牛人确实多,很快就有了回复。最后我简单的总结一下给大家参考:
document.getElementById 最初被定义为 HTMLDocument (HTML DOM)接口的一个成员,但是在后来的 2 级 DOM 中移入到 Document (XML DOM)接口中。
document.getElementById属于host object,它是一个function,但是它并没有被定义在ECMAScript中而是DOM接口的一部分。
支持[[Call]](内部属性?)host object的typeof返回值就是function。请记住Host Objects并不总是遵循Native Objects的相关规则,比如typeof。
而对于testFunc它是native object, 更具体地说是native function。
下面是EcmaScript 5对于typeof操作符的返回结果的归类:

Type of val

Result

Undefined

"undefined"

Null

"object"

Boolean

"boolean"

Number

"number"

String

"string"

Object (native and does not implement [[Call]])

"object"

Object (native or host and does implement [[Call]])

"function"

Object (host and does not implement [[Call]])

Implementation-defined except may not be "undefined", "boolean", "number", or "string".

所以如果要实现用$代替document.getElementById需要这么做:
复制代码 代码如下:

var $ = function(id) { return document.getElementById(g) };

但是即使有了上面的解释之后,我对Host Object和Native Object又有了新的疑惑。

相关文章

  • bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)

    bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)

    这篇文章主要为大家详细介绍了bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs等相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 详解用原生JavaScript实现jQuery的某些简单功能

    详解用原生JavaScript实现jQuery的某些简单功能

    本篇文章主要对用原生JavaScript实现jQuery的某些简单功能进行详细全面的讲解,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JavaScript数组去重的6个方法

    JavaScript数组去重的6个方法

    本篇文章主要介绍了JavaScript数组去重的6个方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js 弹簧效果代码

    js 弹簧效果代码

    上次做图片滑动展示效果时做了减速效果,就想做一个加速效果。结合起来就想到了下面这个东西,当然只是类似弹簧,而不是真正的弹簧。
    2008-09-09
  • 刷新页面的几种方法小结(JS,ASP.NET)

    刷新页面的几种方法小结(JS,ASP.NET)

    本篇文章只要是对刷新页面的几种方法进行了详细的总结介绍,包括JS与ASP.NET。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 微信小程序获取音频时长与实时获取播放进度问题

    微信小程序获取音频时长与实时获取播放进度问题

    这篇文章主要介绍了微信小程序获取音频时长与实时获取播放进度,文中给大家通过一个例子介绍了微信小程序音频长度获取的问题,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-08-08
  • js实现一个简单的数字时钟效果

    js实现一个简单的数字时钟效果

    本文主要介绍了js实现一个简单的数字时钟效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • Jquery代码实现图片轮播效果(一)

    Jquery代码实现图片轮播效果(一)

    经理交给我一个网站新闻资讯网页开发的活儿,对于我这样的java程序员,没有接触过网页设计这么高端的东东,该怎么搞呢,去度娘那搜索到不少结果,而且很大部分都是用jquery做的,于是根据自己的一些的理解,提供了这篇jquery轮播效果的讲解,有需要的朋友可以来参考下
    2015-08-08
  • Javascript 中介者模式实例

    Javascript 中介者模式实例

    在页面上,用户会有很多的操作 ,每进行一次操作我们需要去展示操作的结果,在这里我们有了一个问题,我们应如何去展示不同的结果呢?
    2009-12-12
  • 在JS方法中返回多个值的方法汇总

    在JS方法中返回多个值的方法汇总

    本文给大家汇总了在javascript方法中返回多个值的方法,都是在个人项目中检验过的,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-05-05

最新评论