Pourquoi les méthodes jQuery ou DOM comme getElementById ne peuvent-elles pas localiser les éléments ?

Question

Quelles sont les raisons possibles pour lesquelles l'élément ne peut pas être trouvé par

document.getElementById、$("#id") ou par toute autre méthode DOM/sélecteur jQuery ?

Exemples de questions :

• jQuery ne parvient pas à lier silencieusement les gestionnaires d'événements
• Méthode « getter » jQuery (.val()、.html()、.text()) 返回 undefined
• Les méthodes DOM standard renvoyant null entraînent l'erreur suivante :

Uncaught TypeError : Impossible de définir la propriété nulle '...'

Uncaught TypeError : Impossible de définir la propriété sur null (paramètre '...')

Uncaught TypeError : Impossible de lire la propriété '...' de null

Uncaught TypeError : Impossible de lire la propriété de null (lire '...')

La forme la plus courante est :

Uncaught TypeError : impossible de définir la propriété 'onclick' sur null

Uncaught TypeError : Impossible de lire la propriété 'addEventListener' de null

Uncaught TypeError : impossible de lire la propriété « style » de null

Answer 1

Court : Parce que l'élément que vous recherchez n'existe pas encore dans le document.

---

Pour le reste de cette réponse, j'utiliserai tel que getElementById ，但这同样适用于 getElementsByTagName, < code>querySelector, ainsi que toute autre méthode DOM pour sélectionner des éléments.

Raisons possibles

Trois raisons pour lesquelles l'élément

pourrait ne pas exister :

1. L'élément avec l'ID transmis n'existe pas dans le document. Vous devez vérifier que l'ID que vous transmettez getElementById correspond réellement à l'ID d'un élément existant dans le HTML (généré) et que vous n'avez pas mal orthographié l'ID (les ID sont sensibles à la casse !).

   Si vous utilisez getElementById，请确保您仅提供元素的 ID（例如 document.getElemntById("the-id “））。如果您使用的方法接受 CSS 选择器（例如 querySelector），请确保在 ID 之前包含 # 以表明您正在查找ID（例如，document.querySelector("#the-id")）。您不能不将#与getElementById一起使用，并且必须将其与querySelector一起使用和类似的。另请注意，如果 ID 中包含在 CSS 标识符（例如 .；包含 . 字符的 id 属性是不好的做法，但有效），您必须使用 querySelector (document.querySelector("#the\.id"))) 时转义这些内容，但使用 getElementById ( >document.getElementById("the.id"), assurez-vous de

   seulement
fournir l'ID de l'élément (par exemple document.getElemntById("the-id ")). Si vous utilisez une méthode qui accepte un sélecteur CSS (par exemple, querySelector), veillez à inclure # avant l'ID pour indiquer que vous recherchez l'ID ( par exemple, document.querySelector ("#the-id")). Vous ne pouvez pas
2. ne pas

   utiliser # avec getElementById, et

   devez
l'utiliser avec querySelector et similaire. Notez également que si l'ID contient des caractères non valides dans l' (par exemple . ; un attribut id contenant des caractères . est une mauvaise pratique, mais valide), vous devez utiliser un querySelector < /code> (document.querySelector("#the\.id"))) , mais utilisez

( >document.getElementById("the.id") ). iframe 中（这是它自己的文档）。当您搜索包含 iframe

L'élément n'existait pas lorsque vous avez appelé

. iframe 或类似文件中），您需要查看 iframe 中的文档，而不是父文档，也许可以通过获取 iframe 元素并使用其 < code>contentDocument

🎜Même si vous pouvez voir l'élément sur la page, il ne se trouve pas dans le document que vous interrogez car il se trouve dans le document pour les éléments de 🎜 qui ne sont pas recherchés. 🎜 🎜 🎜 🎜Si le problème est la raison 3 (au niveau de l'attribut 🎜🎜 pour accéder à sa documentation (même origine uniquement)). La suite de cette réponse aborde les deux premières raisons 🎜.

La deuxième raison - elle n'est pas encore là - est très courante. Les navigateurs analysent et traitent le HTML de haut en bas. Cela signifie que tous les appels à l'élément DOM effectués avant que l'élément DOM n'apparaisse dans le code HTML échoueront.

Considérons l'exemple suivant :

sssccc

div 出现在script之后。执行脚本时，该元素尚不存在，并且 getElementById 将返回 null.

jQuery

Cela s'applique également à tous les sélecteurs jQuery. Si vous mal épelezvos sélecteurs, ou si vous essayez de les sélectionner avant qu'ils n'existent réellement, jQuery ne les trouvera pas.

Un problème supplémentaire survient lorsque jQuery n'est pas trouvé parce que vous avez chargé le script sans protocole et que vous l'exécutez à partir du système de fichiers :

sssccc

Cette syntaxe est utilisée pour permettre le chargement des scripts via HTTPS sur les pages avec le protocole https:// et la version HTTP sur les pages avec le protocole http://

Cela a pour effet secondaire malheureux d'essayer de charger file://somecdn.somewhere.com...

mais d'échouer

---

Solution

Avant d'appeler getElementById (ou toute méthode DOM d'ailleurs), assurez-vous que l'élément auquel vous souhaitez accéder existe, c'est-à-dire que le DOM est chargé.

Placez simplement JavaScript après l'élément DOM correspondant pour vous en assurer

sssccc

Dans ce cas, vous pouvez également placer le code avant la balise body de fermeture () (tous les éléments du DOM seront disponibles lors de l'exécution du script).

D'autres solutions incluent l'écoute de load load ^[MDN] 或 DOMContentLoaded[MDN] ou DOMContentLoaded

[MDN]

événement. Dans ces cas, peu importe où dans le document vous placez le code JavaScript, n'oubliez pas de placer tout le code de gestion DOM dans les gestionnaires d'événements. Exemple :

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

Voir cet article sur quirksmode.org pour plus d'informations sur la gestion des événements et les différences entre les navigateurs.

jQueryhttp: 或 https:

Assurez-vous d’abord que jQuery est chargé correctement.

Utilisez les outils de développement de votre navigateur load/DOMContentLoaded 事件正是 jQuery 使用 .ready() découvrez si le fichier jQuery est trouvé et corrigez l'URL sinon (par exemple ajoutez schéma au début, ajustez le chemin, etc.) Écoute

[Documentation]🎜🎜🎜. Tout le code jQuery qui affecte les éléments DOM doit se trouver dans ce gestionnaire d'événements. 🎜

En fait, le tutoriel jQuery indique clairement :

// do stuff when DOM is ready
});

Vous pouvez également utiliser la syntaxe abrégée :

$(function() {
    // do stuff when DOM is ready
});

Les deux sont équivalents.

Answer 2

L'élément que vous essayez de trouver n'est pas dans le DOM< /a> lorsque votre script s'exécute.

L'emplacement d'un script qui s'appuie sur le DOM peut avoir un impact profond sur son comportement. Les navigateurs analysent les documents HTML de haut en bas. Les éléments sont ajoutés au DOM et les scripts sont (généralement) exécutés lorsqu'ils sont rencontrés. Cela signifie que l’ordre compte. Souvent, les scripts ne peuvent pas trouver les éléments qui apparaissent plus tard dans le balisage car ils n'ont pas encore été ajoutés au DOM.

Considérez le balisage suivant : le script n° 1 ne trouve pas

, tandis que le script n° 2 réussit : 

sssccc
test div
sssccc