web-dev-qa-db-ja.com

document.allとdocument.getElementById

いつdocument.allとdocument.getElementByIdを使用すべきですか？

javascriptgetelementbyid
51
coderex

_document.all_は、W3C標準に対するMicrosoft独自の拡張機能です。

getElementById()は標準です-それを使用してください。

ただし、 jQuery のようなjsライブラリを使用すると便利かどうかを検討してください。たとえば、$("#id")はgetElementById()と同等のjQueryです。さらに、 CSS3だけでなく セレクターを使用できます。

60
Phil Rykoff

document.allはvery古い、あなたは もう使用する必要はありません です。

引用するには 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];
}
37
Marcel Korpel

実際には、_document.all_はminimallyと同等です_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); 
}
_
13
Kevin Fegan

document.all（）は、DOM要素にアクセスする非標準の方法です。いくつかのブラウザから非推奨になりました。ドキュメントのすべてのサブ要素にアクセスできます。

document.getElementById（）は標準であり、完全にサポートされています。各要素には、ドキュメント上で一意のIDがあります。

あなたが持っている場合：

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

を使用して

document.getElementById("testing");

その特定のdivにアクセスできます。

6
Marcos Placona

_document.querySelectorAll_（および最初に見つかった要素を返すdocument.querySelector()バリアント）は、はるかに強力です。簡単にできます：

  • document.querySelectorAll("*")を使用してコレクション全体を取得し、非標準の_document.all_プロパティを効果的にエミュレートします。
  • document.querySelector("#your-id")を使用して、document.getElementById()関数を効果的にエミュレートします。
  • document.querySelectorAll(".your-class")を使用して、document.getElementsByClassName()関数を効果的にエミュレートします。
  • _document.forms_の代わりにdocument.querySelectorAll("form")を使用し、_document.links_の代わりにdocument.querySelectorAll("a")を使用します。
  • 他のドキュメントビルトインではカバーできない、はるかに複雑なDOMクエリ（利用可能なCSSセレクターを使用）を実行します。

統一されたクエリAPIを使用する方法です。 _document.all_が標準に含まれていても、それは単に不便です。

5
Multiversum

具体的には、document.allはIE4の前に導入されましたdocument.getElementByIdが導入されていました。

したがって、document.allは、コードが意図されていることを意味しますIE4をサポートするため最新のものではありませんでした。

IE4をサポートする必要があるという非常にまれなイベントでは、document.all（またはこれらの古代のIE仕様）を処理するライブラリ。

2
DOK

Microsoftのアーカイブ済みInternet Explorer Dev Center 、document.allは、IE 11 and Edge！

2
Michael Biermann

document.allは、Chromeで動作します（それ以来いつかはわかりません）ですが、過去20年間は見落としていました。..単に不格好なdocument.getElementById。 Firefoxで動作するかどうかは定かではありませんが、既存のWebを採用するのではなく、常に新しい標準を作成して、既存のWebとの互換性を望みません。

0
mike nelson