document.all 与 document.getElementById答案

【问题标题】：document.all vs. document.getElementByIddocument.all 与 document.getElementById
【发布时间】：2010-03-09 10:53:39
【问题描述】：

什么时候应该使用document.all 和document.getElementById？

【问题讨论】：

document.all?伙计，那是老派！
老派？我检查了我的脚本，它们似乎同时使用了这两个选项，以便满足较旧的浏览器。所以这根本不是“老派”，而更像是健全的编程，这表明浏览器制造商将此视为错误，是谷歌雇用的最无知且可能缺乏经验的编码人员。
有趣的事实：按照邪恶的约定，typeof document.all === 'undefined'

标签： javascript getelementbyid

【解决方案1】：

document.all 是 Microsoft 对 W3C 标准的专有扩展。

getElementById() 是标准的 - 使用它。

但是，请考虑使用像 jQuery 这样的 js 库是否会派上用场。例如，$("#id") 是 getElementById() 的 jQuery 等价物。另外，您可以使用more than just CSS3 选择器。

【讨论】：

【解决方案2】：

document.all非常老了，你don't have to use it anymore。

引用Nicholas Zakas：

例如，当 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];
}

【讨论】：

（id）从何而来？这是一个神奇的变量吗？还是我先从某个地方检索它？
@JWoodchuck 这是您在 DOM 中设置的 id，例如<div id="foo">，那么id 就是foo。

【解决方案3】：

实际上，document.all 仅与 document.getElementById 相比最低。你不会用一个代替另一个，它们不会返回相同的东西。

如果您尝试通过浏览器功能进行过滤，您可以像在Marcel Korpel's answer 中一样使用它们，如下所示：

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];
}

但是，在功能上，document.getElementsByTagName('*') 更等同于 document.all。

例如，如果您实际上要使用 document.all 来检查页面上的所有元素，如下所示：

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

您可以改用 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(i) 表示法是如何工作的。不应该是document.all[i]吗？
@DSoa - 经过一些研究，我不完全确定哪个是正确的，或者如果不知何故，两者都会起作用。 This page 使用 [i] 就像 document.all[4].name 一样，this page 使用 (i) 就像 document.all(i).tagName b>.

【解决方案4】：

document.all() 是一种访问 DOM 元素的非标准方式。它已被一些浏览器弃用。它使您可以访问文档中的所有子元素。

document.getElementById() 是一个标准并且完全受支持。每个元素在文档上都有一个唯一的 id。

如果你有：

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

使用

document.getElementById("testing");

将有权访问该特定 div。

【讨论】：

【解决方案5】：

document.querySelectorAll（及其返回第一个找到元素的document.querySelector() 变体）功能强大得多。您可以轻松：

使用document.querySelectorAll("*") 获取整个集合，有效模拟非标准document.all 属性；
使用document.querySelector("#your-id")，有效模拟document.getElementById()函数；
使用document.querySelectorAll(".your-class")，有效模拟document.getElementsByClassName()函数；
用document.querySelectorAll("form")代替document.forms，用document.querySelectorAll("a")代替document.links；
并执行任何更复杂的 DOM 查询（使用任何可用的 CSS 选择器），其他文档内置函数无法涵盖这些查询。

统一查询 API 是必经之路。即使document.all 符合标准，也很不方便。

【讨论】：

我花了一段时间才意识到，在 IE 中，document.all['word'] 返回了一个包含 id 为 "word" 的所有元素的列表。即使页面上有多个具有相同 ID 的元素！所以用document.querySelector('#word') 替换它会破坏页面。我必须做的是，通过在 ID 后面加上一个数字使 ID 唯一，然后使用 document.querySelectorAll('[id^="word"]')。希望这会对某人有所帮助！

【解决方案6】：

具体来说，document.all 是在引入 document.getElementById 之前为 IE4 引入的。

因此，document.all 的存在意味着代码旨在支持 IE4，或者试图将浏览器识别为 IE4（尽管它可能是 Opera），或者是编写（或复制和粘贴）代码不是最新的。

如果您需要支持 IE4，那么您确实需要 document.all（或处理这些古老 IE 规范的库）。

【讨论】：

【解决方案7】：

根据Microsoft's archived Internet Explorer Dev Center，document.all 在 IE 11 和 Edge 中已弃用！

【讨论】：

有趣。现在chrome采纳了，我希望FF也能加入，但如果连MS都放弃了，它就真的没了。我更喜欢 document.all 的简洁性：document.all.editor 比 document.getElementById("editor") 更易于读写。
IE11 中仍然存在。事实上，它甚至存在于 Edge 中。但是得到这个：要击败所有这些if (document.all) 检查等，Boolean(document.all) 评估为false（并且typeof document.all 是"undefined" 和document.all == undefined 是true）。但它就在那里，并且有效。这甚至是in the JavaScript spec。 :-)

【解决方案8】：

document.all 现在在 Chrome 中工作（不知道从什么时候开始），但在过去的 20 年里我一直在想念它......只是一个比笨重的 document.getElementById 更短的方法名称。不确定它是否适用于 Firefox，那些家伙从来没有任何与现有网络兼容的愿望，总是创建新标准而不是拥抱现有网络。

【讨论】：