为什么 document.all 有时像一个对象,有时又不像一个对象

为什么 document.all 有时像一个对象,有时又不像一个对象?
document.all 奇怪的地方在于它是一个数组(其实是对象),但是类型却是 undefined。

先看控制台代码

>>> document.all
HTMLAllCollection[1009]  // 控制台打印出一个数组
>>> document.all[0]
<html>...</html> // 第一个元素是 html 标签,看起来很像一个数组
>>> typeof document.all
'undefined' // 咦,居然不是 object?
>>> if(document.all){console.log('document.all 为真')}else{console.log('document.all 为假')}
document.all 为假 

我第一次看到 document.all 的时候也很惊讶,怎么会有这么奇葩的对象。

用各个浏览器测试一下结果如下:

  1. 所有浏览器都支持用 document.all[index] 或者 document.all[id] 获取标签
  2. 但是 typeof document.all,在 IE 10 以下的值为 ‘object’,在其他浏览器的值均为 ‘undefined’

为何会这样?那我们就要从很久很久以前说起了。多久呢,大概20年前。

那个时候,浏览器刚刚出现,很多功能不完善,比如 document.getElementById,都有很多浏览器不支持。甚至连 W3C 都还没制定出 Web 标准,这个时候 IE 4(我擦我都没见过 IE 4)推出了一些 API,只有 IE 4 支持,其中就包括我们今天说 document.all,它比 document.getElementById 要好用一些,比如你可以用 document.all[‘topbar’] 来获取元素,所以那个时候很多程序员会些这样的代码:

if(document.all){
  // IE 4 代码
  document.all['topbar']
  ...
}else if(document.getElementById){
  // 其他浏览器代码
  document.getElementById('topbar')
}

甚至某些程序员直接认为 document.all 为真的浏览器,就是 IE。也就是这样:

if(document.all){
   // IE
}else{
   // 非 IE
}

其他浏览器(网景)觉得 IE 4 有的功能,我也要有才行。于是也加上 document.all,功能一样,可以获取元素。

但是呢,其他浏览器又不想被某些程序员认为是 IE,于是 typeof document.all 的值定为 undefined。

有人说 W3C 标准出来后,为什么浏览器不把 document.all 纠正过来,去掉或者变成一个正常的对象都可以啊。

太天真了,如果浏览器这么做了,那么当时世界上会有很多页面 JS 代码都不能正常运行,到时候用户只会怪浏览器不给力,然后卸载掉浏览器。

浏览器厂商才不想冒这样的风险。

于是,最终,我们在所有浏览器上得到了一个类型为 undefined 的 document.all,只有 IE 10 以下,然后保留着 IE 4 的行为。

不过 document.all 现在已经被弃用了,大家不要再使用它了。用 document.getElementById 或者 document.querySelector 就好 🙂

本文只是讲 document.all 吗?不。

现在的前端新人,对浏览器的演化过程并没有任何体会,以为浏览器天生就是按照 Web 标准实现的。发现 IE 不兼容就指责 IE。

浏览器也是软件,浏览器也会犯错,而且浏览器是一直在发展的。

有时间,可以看看浏览器的历史。

题目贡献者:方应杭(方方老师)
知乎专栏:https://zhuanlan.zhihu.com/p/22314932

52 thoughts on “为什么 document.all 有时像一个对象,有时又不像一个对象”

  1. Do you have a spam problem on this blog; I also am a blogger, and I was curious about your situation; we have developed some nice practices and we are looking to exchange solutions with others, be sure to shoot me an e-mail if interested.|

  2. Hi! Do you know if they make any plugins to safeguard against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any suggestions?|

  3. With havin so much content and articles do you ever run into any issues of plagorism or copyright infringement? My site has a lot of unique content I’ve either written myself or outsourced but it appears a lot of it is popping it up all over the internet without my authorization. Do you know any methods to help prevent content from being stolen? I’d truly appreciate it.|

  4. I’m really enjoying the theme/design of your web site. Do you ever run into any browser compatibility issues? A couple of my blog visitors have complained about my site not operating correctly in Explorer but looks great in Safari. Do you have any advice to help fix this problem?|

  5. obviously like your web site but you have to test the spelling on quite a few of your posts. Many of them are rife with spelling issues and I find it very troublesome to inform the truth nevertheless I’ll definitely come again again.|

  6. I think this is among the most important info for me. And i’m glad reading your article. But should remark on few general things, The website style is great, the articles is really nice : D. Good job, cheers|

  7. you’re truly a excellent webmaster. The website loading pace is amazing. It kind of feels that you’re doing any unique trick. Also, The contents are masterwork. you have done a great job on this subject!|

  8. You really make it seem really easy along with your presentation but I to find this topic to be actually something which I believe I would by no means understand. It kind of feels too complex and extremely extensive for me. I am having a look ahead for your subsequent publish, I will attempt to get the dangle of it!|

  9. Thanks , I’ve recently been searching for information approximately this topic for a while and yours is the greatest I’ve discovered so far. But, what concerning the conclusion? Are you positive concerning the source?|

  10. I blog quite often and I truly thank you for your information. The article has truly peaked my interest. I am going to take a note of your site and keep checking for new information about once per week. I opted in for your RSS feed too.|

  11. Link exchange is nothing else except it is only placing the other person’s webpage link on your page at appropriate place and other person will also do same in support of you.|

  12. Hello all, here every one is sharing these know-how, therefore it’s good to read this blog, and I used to pay a quick visit this weblog every day.|

  13. I don’t even understand how I finished up right here, however I assumed this submit was once good. I don’t recognise who you might be but certainly you are going to a well-known blogger if you are not already. Cheers!|

  14. Hello There. I found your blog using msn. This is a really well written article. I’ll make sure to bookmark it and come back to read more of your useful information. Thanks for the post. I will certainly comeback.|

  15. Hello There. I found your weblog the usage of msn. This is a really smartly written article. I will make sure to bookmark it and return to read extra of your helpful information. Thanks for the post. I’ll certainly return.|

  16. Thank you a bunch for sharing this with all of us you actually understand what you’re talking about! Bookmarked. Please also discuss with my web site =). We can have a link alternate contract among us|

  17. I’ve been surfing online more than 4 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. Personally, if all website owners and bloggers made good content as you did, the internet will be much more useful than ever before.|

  18. I do not know whether it’s just me or if perhaps everybody else experiencing problems with your site. It seems like some of the text on your posts are running off the screen. Can someone else please comment and let me know if this is happening to them as well? This might be a problem with my browser because I’ve had this happen previously. Cheers|

  19. I like the valuable information you provide in your articles. I’ll bookmark your weblog and take a look at again right here regularly. I’m slightly certain I’ll learn lots of new stuff proper here! Good luck for the following!|

  20. A motivating discussion is worth comment. I do believe that you should publish more about this subject, it may not be a taboo subject but generally folks don’t discuss such issues. To the next! All the best!!|

  21. I like the helpful info you supply in your articles.
    I’ll bookmark your weblog and test once more here frequently.
    I’m rather sure I’ll be told many new stuff right here!
    Good luck for the following!

  22. Neat blog! Is your theme custom made or did you download it
    from somewhere? A design like yours with a few simple tweeks would really make my blog shine.
    Please let me know where you got your theme.
    Thank you

  23. Whats up are using WordPress for your site platform? I’m new to the blog
    world but I’m trying to get started and
    create my own. Do you require any html coding knowledge to make your
    own blog? Any help would be greatly appreciated!

  24. Hello there, I found your web site via Google while
    looking for a related topic, your website came up, it appears to be
    like good. I’ve bookmarked it in my google bookmarks.
    Hello there, just was alert to your weblog via Google, and found that it is
    truly informative. I am going to be careful for brussels.

    I will appreciate when you proceed this in future.

    Numerous other folks will likely be benefited from your writing.
    Cheers!

  25. I was suggested this blog by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my problem. You’re incredible! Thanks!|

  26. It’s really very difficult in this busy life to listen news
    on Television, so I simply use the web for that reason, and take the latest information.

  27. I am not certain where you are getting your info, but good topic.
    I needs to spend some time learning much more or working out
    more. Thanks for excellent information I used to be on the lookout
    for this information for my mission.

  28. Woah! I’m really enjoying the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between usability
    and appearance. I must say that you’ve done a awesome job with
    this. Also, the blog loads super fast for me on Chrome.
    Superb Blog!

发表评论

电子邮件地址不会被公开。