简体   繁体   English

document.all与document.getElementById

[英]document.all vs. document.getElementById

什么时候应该使用document.alldocument.getElementById

document.all is a proprietary Microsoft extension to the W3C standard. document.all是W3C标准的Microsoft专有扩展。

getElementById() is standard - use that. getElementById()是标准的 - 使用它。

However, consider if using a js library like jQuery would come in handy. 但是,考虑使用像jQuery这样的js库会派上用场。 For example, $("#id") is the jQuery equivalent for getElementById() . 例如, $("#id")getElementById()的jQuery等价物。 Plus, you can use more than just CSS3 selectors. 另外,您可以使用的不仅仅是CSS3选择器。

document.all is very old, you don't have to use it anymore . document.all已经老了,你不必再使用它了

To quote Nicholas Zakas : 引用尼古拉斯扎卡斯的话

For instance, when the DOM was young, not all browsers supported getElementById(), and so there was a lot of code that looked like this: 例如,当DOM年轻时,并非所有浏览器都支持getElementById(),因此有很多代码如下所示:

if(document.getElementById){  //DOM
    element = document.getElementById(id);
} else if (document.all) {  //IE
    element = document.all[id];
} else if (document.layers){  //Netscape < 6
    element = document.layers[id];
}

Actually, document.all is only minimally comparable to document.getElementById . 其实, document.all只是最低限度媲美document.getElementById You wouldn't use one in place of the other, they don't return the same things. 你不会用一个代替另一个,他们不会返回相同的东西。

If you were trying to filter through browser capabilities you could use them as in Marcel Korpel's answer like this: 如果你试图通过浏览器功能进行过滤,你可以使用它们,就像Marcel Korpel的回答一样:

if(document.getElementById){  //DOM
    element = document.getElementById(id);
} else if (document.all) {    //IE
    element = document.all[id];
} else if (document.layers){  //Netscape < 6
    element = document.layers[id];
}


But, functionally, document.getElementsByTagName('*') is more equivalent to document.all . 但是,在功能上, document.getElementsByTagName('*')更像是document.all

For example, if you were actually going to use document.all to examine all the elements on a page, like this: 例如,如果您实际上要使用document.all来检查页面上的所有元素,如下所示:

var j = document.all.length;
for(var i = 0; i < j; i++){
   alert("Page element["+i+"] has tagName:"+document.all(i).tagName);
}

you would use document.getElementsByTagName('*') instead: 你会使用document.getElementsByTagName('*')代替:

var k = document.getElementsByTagName("*");
var j = k.length; 
for (var i = 0; i < j; i++){
    alert("Page element["+i+"] has tagName:"+k[i].tagName); 
}

document.all() is a non-standard way of accessing DOM elements. document.all()是一种访问DOM元素的非标准方式。 It's been deprecated from a few browsers. 它已被少数浏览器弃用。 It gives you access to all sub elements on your document. 它使您可以访问文档中的所有子元素。

document.getElementById() is a standard and fully supported. document.getElementById()是标准的,完全支持。 Each element have a unique id on the document. 每个元素在文档上都有唯一的ID。

If you have: 如果你有:

<div id="testing"></div>

Using 运用

document.getElementById("testing"); 

Will have access to that specific div. 可以访问该特定div。

document.querySelectorAll (and its document.querySelector() variant that returns the first found element) is much, much more powerful. document.querySelectorAll (及其document.querySelector()变体返回第一个找到的元素)功能强大得多。 You can easily: 你可以轻松地:

  • get an entire collection with document.querySelectorAll("*") , effectively emulating non-standard document.all property; 使用document.querySelectorAll("*")获取整个集合,有效地模拟非标准的document.all属性;
  • use document.querySelector("#your-id") , effectively emulating document.getElementById() function; 使用document.querySelector("#your-id") ,有效地模拟document.getElementById()函数;
  • use document.querySelectorAll(".your-class") , effectively emulating document.getElementsByClassName() function; 使用document.querySelectorAll(".your-class") ,有效地模拟document.getElementsByClassName()函数;
  • use document.querySelectorAll("form") instead of document.forms , and document.querySelectorAll("a") instead of document.links ; 使用document.querySelectorAll("form")代替document.formsdocument.querySelectorAll("a")而不是document.links ;
  • and perform any much more complex DOM querying (using any available CSS selector) that just cannot be covered with other document builtins. 并执行任何更复杂的DOM查询(使用任何可用的CSS选择器),其他文档内置不能覆盖。

Unified querying API is the way to go. 统一查询API是最佳选择。 Even if document.all would be in the standard, it's just inconvenient. 即使document.all符合标准,也只是不方便。

根据微软的归档Internet Explorer开发中心 ,在IE 11和Edge中不推荐使用document.all

Specifically, document.all was introduced for IE4 BEFORE document.getElementById had been introduced. 具体来说, document.all是为IE4 BEFORE document.getElementById引入的。

So, the presence of document.all means that the code is intended to support IE4 , or is trying to identify the browser as IE4 (though it could have been Opera), or the person who wrote (or copied and pasted) the code wasn't up on the latest. 因此, document.all的存在意味着代码旨在支持IE4 ,或者试图将浏览器识别为IE4(虽然它可能是Opera),或者编写(或复制并粘贴)代码的人最新消息。

In the highly unlikely event that you need to support IE4, then, you do need document.all (or a library that handles these ancient IE specs). 在极不可能的事件中,您需要支持IE4,那么,您确实需要document.all (或处理这些古老IE规范的库)。

document.all works in Chrome now (not sure when since), but I've been missing it the last 20 years.... Simply a shorter method name than the clunky document.getElementById . document.all现在可以在Chrome中运行(从那时起就不确定),但是我在过去的20年里一直在想它....简单的方法名称比clunky document.getElementById更短。 Not sure if it works in Firefox, those guys never had any desire to be compatible with the existing web, always creating new standards instead of embracing the existing web. 不确定它是否适用于Firefox,这些人从来没有希望与现有网络兼容,总是创建新标准而不是拥抱现有网络。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM