Pourquoi jQuery ou une méthode DOM telle que getElementById ne trouve pas l'élément ?

Question

Quelles sont les raisons possibles pour document.getElementById , $("#id") ou toute autre méthode DOM / sélecteur jQuery ne trouvant pas les éléments ?

Voici quelques exemples de problèmes :

• jQuery échoue silencieusement à lier un gestionnaire d'événement
• Méthodes "getter" de jQuery ( .val() , .html() , .text() ) de retour undefined
• Une méthode DOM standard retournant null ce qui entraîne plusieurs erreurs :

Erreur de type involontaire : Cannot set property '...' of null Uncaught TypeError : Cannot read property '...' of null

Les formes les plus courantes sont :

Erreur de Type Non Rattrapée : Impossible de définir la propriété 'onclick' de null.

Erreur de Type Non Rattrapée : Impossible de lire la propriété 'addEventListener' de null.

Erreur de Type Non Rattrapée : Impossible de lire la propriété 'style' de null

Answer 1

Si l'ordre d'exécution du script n'est pas en cause, une autre cause possible du problème est que l'élément n'est pas sélectionné correctement :

• getElementById requiert que la chaîne passée soit l'ID in extenso et rien d'autre. Si vous préfixez la chaîne passée avec un # et l'ID ne commence pas par un # rien ne sera sélectionné :

    <div id="foo"></div>
  
    // Error, selected element will be null:
    document.getElementById('#foo')
    // Fix:
    document.getElementById('foo')

• De même, pour getElementsByClassName ne préfixe pas la chaîne de caractères passée avec un caractère . :

    <div class="bar"></div>
  
    // Error, selected element will be undefined:
    document.getElementsByClassName('.bar')[0]
    // Fix:
    document.getElementsByClassName('bar')[0]

• Avec querySelector, querySelectorAll et jQuery, pour faire correspondre un élément avec un nom de classe particulier, il suffit de mettre une balise . directement avant le cours. De la même manière, pour faire correspondre un élément avec un ID particulier, mettez une balise # directement avant l'ID :

    <div class="baz"></div>
  
    // Error, selected element will be null:
    document.querySelector('baz')
    $('baz')
    // Fix:
    document.querySelector('.baz')
    $('.baz')

  Les règles ici sont, dans la plupart des cas, identiques à celles des sélecteurs CSS, et peuvent être vues en détail ici .

• Pour faire correspondre un élément qui possède deux attributs ou plus (comme deux noms de classe, ou un nom de classe et un attribut data- ), placez les sélecteurs de chaque attribut les uns à côté des autres dans la chaîne de sélecteurs, sans un espace les séparant (parce qu'un espace indique que l'on est en présence d'une sélecteur de descendants ). Par exemple, pour sélectionner :

    <div class="foo bar"></div>

  utiliser la chaîne d'interrogation .foo.bar . Pour sélectionner

    <div class="foo" data-bar="someData"></div>

  utiliser la chaîne d'interrogation .foo[data-bar="someData"] . Pour sélectionner le <span> ci-dessous :

    <div class="parent">
      <span data-username="bob"></span>
    </div>

  utiliser div.parent > span[data-username="bob"] .

• Majuscules et orthographe importe pour tout ce qui précède. Si la capitalisation est différente, ou si l'orthographe est différente, l'élément ne sera pas sélectionné :

    <div class="result"></div>
  
    // Error, selected element will be null:
    document.querySelector('.results')
    $('.Result')
    // Fix:
    document.querySelector('.result')
    $('.result')

• Vous devez également vous assurer que les méthodes sont correctement capitalisées et orthographiées. Utilisez-en une :

  $(selector)
  document.querySelector
  document.querySelectorAll
  document.getElementsByClassName
  document.getElementsByTagName
  document.getElementById

  Toute autre orthographe ou majuscule ne fonctionnera pas. Par exemple, document.getElementByClassName entraînera une erreur.

• Veillez à transmettre une chaîne de caractères à ces méthodes de sélection. Si vous passez quelque chose qui n'est pas une chaîne à la méthode querySelector , getElementById etc., il est presque certain que cela ne fonctionnera pas.

• Si les attributs HTML des éléments que vous voulez sélectionner sont entourés de guillemets, il doit s'agir de guillemets simples (simples ou doubles) ; les guillemets droits comme ‘ ou ” ne fonctionnera pas si vous essayez de sélectionner par ID, classe ou attribut.