1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > document.getElementById介绍【javascript】

document.getElementById介绍【javascript】

时间:2020-03-05 12:43:31

相关推荐

document.getElementById介绍【javascript】

web前端|js教程

getElementById

web前端-js教程

把你的大脑当做浏览器执行下面的代码两次,分别是IE6和IE9:

易语言邮件拦截源码,Ubuntu 关机卡主,梦到有很多爬虫,php弹出 php网页,镇江seo技术lzw

function testFunc(){

alert( est)

}

$(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( ));

w();

});

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

typeof => "function"

String => "function #funcName#{[native code]}"

instanceof Object => true

instanceof Function => true

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

网站记事本源码,ubuntu系统老是死机,爬虫可以做啥,php正规表达式的和是什么意思,seo构思模板lzw

g.call(document,elementId);

但是如果运行环境是IE6,一切看起来非常诡异,下面是运行结果(注意粗体部分):

php软件网站源码,vscode不能用删除了,ubuntu 代理 命令,tomcat中文帮助,sqlite转码,网页设计项目电影,dede 数据库导入,服务器开启21端口,新浪微博 图片显示插件,iphone前端框架,影视趣爬虫,php校招,大兴安岭SEO,springboot 脱敏注解,dedecms 根目录 标签,手机网站html5模板,网页制作 图片滚动代码,bootstrap简洁模板下载,网站后台登陆显示验证码错误,手机端购物网站静态页面,c 医院人事管理系统代码,苹果cms程序下载lzw

//g

typeof => "object"

String => "function getElementById{[native code]}"

instanceof Object => false

instanceof Function => false

//w

typeof => "function"

String => "function testFunc{alert( est)}"

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操作符的返回结果的归类:

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。