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又有了新的疑惑。

(0)

相关推荐

  • js中document.getElementByid、document.all和document.layers区分介绍

    document.all是IE 4.0及以上版本的专有属性,是一个表示当前文档的所有对象的娄组,不仅包括页面上可见的实体对象,还包括一些不可见的对象,比如html注释等等.在document.all数组里面,元素不分层次,是按照其在文档中出现的先后顺序,平行地罗列的.所以可以用数字索引来引用到任何一个元素.但比较常用的是用对象id来引用一个特定的对象,比如document.all["element"]这样. document.layers是Netscape 4.x专有的属性,是一个代表

  • document.getElementById方法在Firefox与IE中的区别

    [要点]document.getElementById方法在Firefox与IE中的区别. 如下,有一name="txtVersion"的text控件: 复制代码 代码如下: <div> <input type="text" name="txtVersion" size="15" value="Version" maxlength="25"> </div&g

  • document.getElementById为空或不是对象的解决方法

    1. 'null'为空或不是对象: <script type="text/javascript"> 里面加个defer=true属性试试看, 即:<script type="text/javascript" defer=true> 2. document.getElementById为null 原因: var titab=document.getElementById("titletab");没有取到对象 解决办法: 1.

  • 各浏览器对document.getElementById等方法的实现差异解析

    所有Web前端同仁对 document.getElementById 都非常熟悉了.开发过程中经常需要用其获取页面id为xx的元素,自从元老级JS库Prototype流行后,都喜欢这么简写它 复制代码 代码如下: // 方式1 function $(id){ return document.getElementById(id); } 有没有人想过为什么要这么写,而不用下面的方式写呢? 复制代码 代码如下: // 方式2 var $ = document.getElementById; 这么写的$

  • jquery中的 $("#jb51")与document.getElementById("jb51") 的区别

    在今天写一个canvas的小程序时,才发现这两者是不一样的. 直接用alert()来显示这两个方法倒底获得的是什么.代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jb51</title> <link href="css/index.css" rel="stylesheet&

  • document.getElementById的简写方式(获取id对象的简略写法)

    比如用_$(id)代替document.getElementById(id). 如果是纯粹的代替可以使用下面的代码 复制代码 代码如下: function $(id){document.getElementById(id)} 个人比较推荐用prototype中对document.getElementById的定义: 复制代码 代码如下: function $() { var elements = new Array(); for (var i = 0; i < arguments.length;

  • document.getElementById获取控件对象为空的解决方法

    1.下面是一个简单的例子,页面加载时显示一段信息 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>      <

  • 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); //

  • javascript typeof id==='string'?document.getElementById(id):id解释 原创

    一般来说想要理解这段代码,需要掌握如下两个函数 一个是 typeof一个就是三元运算符 看完了上面的文章再看下面的就比较好理解了 一般来说常用的函数代码 function $(id){ return typeof id==='string'?document.getElementById(id):id;} var GetBy = function (id) { return "string" == typeof id ? document.getElementById(id) : id

  • javascript代码在ie8里报错 document.getElementById(...) 为空或不是对象的解决方法 原创

    ie8中对于声明文档类型更加严格如下面的代码. 运行环境: function osdo(str){ document.getElementById("os").value=str; } 清空 Windows平台 S60v2 S60v3 CHM PDF PPT WORD EXCEL asp asp+access asp+sqlserver asp+sql/access php源码 php php+mysqljsp asp.net源码 asp.net asp.net+access asp.

  • 原生js操作checkbox用document.getElementById实现

    jquery与checkbox的checked属性的问题,讲的是控件<input type="checkbox"></input> 1.页面加载成功后,点击选中或取消选中该checkbox,checkbox属性里的checked属性不会根据该checkbox是否选中而变化 2.checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的值与它是否给钩上没有关系 3.使用document.g

  • document.getElementsByName和document.getElementById 在IE与FF中不同实现

    对于ID & Name 按最经典的解释的:"ID 就如同我们的身份证,Name就如同我们的名字",也就是说,在一个html文档中ID是唯一的,但是Name是可以重复的,就象我们的人名可以重复但是身份证确实全中国唯一的(PS:据说有重复的^_^) 但是对于document.getElementsByName 与document.getElementById 这个两个方法,IE中是并没有严格区分 ID 与 Name 的,比如: <script type="text/

  • JavaScript中也使用$美元符号来代替document.getElementById

    复制代码 代码如下: function $(id){return document.getElementById(id); 上面的对于新版本的浏览器都是没有问题的,如果使用古老的浏览器,可以使用下面的函数 复制代码 代码如下: function $(objectId) { if(document.getElementById && document.getElementById(objectId)) { // W3C DOM return document.getElementById(o

随机推荐