web-dev-qa-db-fra.com

document.all contre document.getElementById

Quand devriez-vous utiliser document.all contre document.getElementById?

javascriptgetelementbyid
50
coderex

document.all est une extension propriétaire de Microsoft au standard W3C. 

getElementById() est standard - utilisez-le.

Cependant, envisagez l’utilisation d’une bibliothèque js telle que jQuery serait pratique. Par exemple, $("#id") est l’équivalent jQuery de getElementById(). De plus, vous pouvez utiliser plus que simplement CSS3 selectors.

58
Phil Rykoff

document.all est très vieux, vous vous ne devez plus l'utiliser .

Pour citer Nicholas Zakas :

Par exemple, quand le DOM était jeune, tous les navigateurs ne sont pas supportés getElementById (), et donc il y avait un beaucoup de code qui ressemblait à ceci:

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];
}
36
Marcel Korpel

En fait, document.all n'est que minimalement comparable à document.getElementById. Vous ne voudriez pas utiliser l'un à la place de l'autre, ils ne renvoient pas les mêmes choses.

Si vous essayez de filtrer à travers les fonctionnalités du navigateur, vous pouvez les utiliser comme dans la réponse de Marcel Korpel comme ceci: 

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


Mais, fonctionnellement, document.getElementsByTagName('*') est plus équivalent à document.all.

Par exemple, si vous utilisiez réellement document.all pour examiner tous les éléments d'une page, procédez comme suit:

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

vous utiliseriez plutôt 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 () est un moyen non standard d'accéder aux éléments DOM. Il est obsolète depuis quelques navigateurs. Il vous donne accès à tous les sous-éléments de votre document.

document.getElementById () est un standard entièrement supporté. Chaque élément a un identifiant unique sur le document.

Si tu as:

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

En utilisant 

document.getElementById("testing");

Aura accès à cette div spécifique.

6
Marcos Placona

document.querySelectorAll (et sa variante document.querySelector() qui retourne le premier élément trouvé) est beaucoup, beaucoup plus puissant. Vous pouvez facilement:

  • obtenir une collection entière avec document.querySelectorAll("*"), émulant efficacement la propriété non-standard document.all;
  • utilisez document.querySelector("#your-id"), en émulant efficacement la fonction document.getElementById();
  • utilisez document.querySelectorAll(".your-class"), en émulant efficacement la fonction document.getElementsByClassName();
  • utilisez document.querySelectorAll("form") au lieu de document.forms et document.querySelectorAll("a") au lieu de document.links;
  • et effectuez toutes les requêtes DOM beaucoup plus complexes (à l'aide d'un sélecteur CSS disponible) qui ne peuvent tout simplement pas être couvertes par d'autres éléments intégrés au document.

API de requête unifiée est la voie à suivre. Même si document.all serait dans la norme, cela ne serait pas pratique.

5
Multiversum

Plus précisément, document.all a été introduit pour IE4 AVANT que document.getElementById ait été introduit. 

Donc, la présence de document.all signifie que le code est destiné à supporter IE4, ou tente d'identifier le navigateur comme étant IE4 (bien que cela puisse être Opera), ou la personne qui a écrit (ou copié et collé le code n'était pas à la dernière.

Dans le cas très improbable où vous deviez prendre en charge IE4, vous avez besoin de document.all (ou d'une bibliothèque qui gère ces anciennes spécifications IE).

2
DOK

Et document.all ne sera pas supporté par IE11!

http://msdn.Microsoft.com/en-us/library/ie/ms537434(v=vs.85).aspx

2
Michael Biermann

document.all fonctionne maintenant dans Chrome (je ne sais pas quand), mais cela fait 20 ans que je le manque. Simplement un nom de méthode plus court que le document.getElementById maladroit. Pas sûr que cela fonctionne dans Firefox, ces gars-là n’ont jamais voulu être compatibles avec le Web existant, créant toujours de nouvelles normes au lieu d’englober le Web existant.

0
mike nelson