document.getElementByID externe ou inline?

Document.getElementByID fonctionne-t-il uniquement s’il est aligné avec le fichier HTML?

Non.

peut-il fonctionner correctement sur un fichier JS externe?

Oui.

Vous appelez probablement document.getElementById() avant que le DOM ne soit prêt.

Tout d’abord, assurez-vous d’utiliser document.getElementById("xxx") et non pas document.getElementByID("xxx") (notez la différence de capitalisation à la fin). Votre question fait référence à document.getElementByID("xxx") ce qui pourrait poser problème ici.

Deuxièmement, vous devez vous assurer que la fonction est exécutée APRÈS que les éléments DOM pertinents aient été analysés par le navigateur. Si vous placez document.getElementById dans un fichier JS externe chargé dans la section et exécuté immédiatement après son chargement, le DOM ne sera pas encore prêt.

Vous avez plusieurs options:

1) Placez les balises fichier JS externe à la fin du corps, juste avant la . Cela va non seulement charger / afficher votre page plus rapidement, mais aussi garantir que le DOM soit analysé avant que quoi que ce soit dans ce fichier JS ne puisse être exécuté.

  Your HTML here   

2) Puisque vous avez jQuery, placez votre code immédiatement exécuté dans un bloc $(document).ready(fn) afin que jQuery retienne l’exécution jusqu’à ce que le DOM soit prêt. Si vous le faites de cette façon, vous pouvez alors placer votre code n'importe où (y compris dans la section si vous le souhaitez).

 $(document).ready(function() { // put your page initialization code here }); 

3) Mettez votre code où vous voulez, mais ne le faites pas exécuter immédiatement. Au lieu de cela, placez tout votre code d’initialisation dans une fonction d’initialisation (appelons-la myPageInit() laquelle vous appelez:

 $(document).ready(myPageInit); 

4) Mettez votre code où vous voulez, mais ne le faites pas exécuter immédiatement. Au lieu de cela, mettez tout votre code d’initialisation dans une fonction d’initialisation (appelons-la myPageInit() que vous appelez à partir d’un script juste avant la avec ceci:

Si vous mettez le script dans le corps n’a pas encore été chargé et les éléments ne sont pas là.

Reportez le script en utilisant les fonctions de jQuery ou placez le script à la fin du corps.

Ma suggestion est de faire ceci:

 window.onload = function () { // document.getElementById() code here } 

Ensuite, votre document.getElementById() ne sera pas exécuté tant que tous les éléments de la page ne seront pas complètement chargés.