document.getElementById介绍


Posted in Javascript onSeptember 13, 2011

把你的大脑当做浏览器执行下面的代码两次,分别是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又有了新的疑惑。
Javascript 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
js全选按钮的实现方法
Nov 17 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
js创建数组的简单方法
Jul 27 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 #Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 #Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 #Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 #Javascript
各情景下元素宽高的获取实现代码
Sep 13 #Javascript
JS字符串函数扩展代码
Sep 13 #Javascript
Javascript学习笔记 delete运算符
Sep 13 #Javascript
You might like
php学习之 认清变量的作用范围
2010/01/26 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
python实现连续图文识别
2018/12/18 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
python爬虫---requests库的用法详解
2020/09/28 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书