EnglishCommencer

Le DOM et les événements

L'arbre du document vu de JavaScript : sélectionner, lire et modifier des éléments, écouter des événements, leur propagation, preventDefault et la délégation.

  • 27 cartes
  • 3 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier

Quelques cartes du deck

  • DOM : de quoi s'agit-il ?

    Voir la réponse

    Représentation de la page sous forme d'arbre d'objets (éléments, textes, attributs) que JavaScript peut lire et modifier, la page affichée suivant ces changements.

    Le DOM n'est pas le fichier HTML : c'est l'arbre que le navigateur en construit. Un script qui l'altère ne change pas le fichier sur le serveur.

  • Combien d'éléments contient la liste renvoyée par document.querySelectorAll('ul li.done') ?

    ```html
    <ul>
    <li>Lait</li>
    <li class="done">Pain</li>
    <li class="done">Riz</li>
    </ul>
    <ol>
    <li class="done">Thé</li>
    </ol>
    `

    • 2
    • 3
    • 1
    • 4
    Voir la réponse

    2

    Le sélecteur ul li.done demande les li de classe done situés dans un ul : Pain et Riz. Thé est dans un ol, Lait n'a pas la classe.

  • Dans un écouteur, l'objet événement donne l'élément réellement visé par la propriété … et celui qui porte l'écouteur par la propriété ….

    Voir la réponse

    Dans un écouteur, l'objet événement donne l'élément réellement visé par la propriété target et celui qui porte l'écouteur par la propriété currentTarget.

    Avec une délégation sur un ul, currentTarget est toujours le ul, alors que target est le li ou le bouton cliqué.

  • querySelector : de quoi s'agit-il ?

    Voir la réponse

    Méthode qui reçoit un sélecteur CSS et renvoie le premier élément correspondant, ou null s'il n'y en a aucun.

    querySelectorAll renvoie tous les éléments correspondants dans une liste (vide s'il n'y en a pas). Utiliser le résultat null provoque Cannot read properties of null.

  • Ce script est placé dans le head, sans defer. Que se passe-t-il ?

    ```javascript
    const bouton = document.querySelector('#envoyer');
    bouton.addEventListener('click', envoyer);
    `

    • Rien : l'écouteur est posé dès que le bouton apparaît
    • TypeError: Cannot read properties of null (reading 'addEventListener')
    • SyntaxError: Unexpected identifier 'bouton' au chargement
    • Le bouton existe mais l'écouteur est appelé deux fois
    Voir la réponse

    TypeError: Cannot read properties of null (reading 'addEventListener')

    Le navigateur exécute le script avant d'avoir construit le body : le sélecteur ne trouve rien et renvoie null. Réparation : <script defer src="…">, qui attend la fin de l'analyse du document.

Réviser ce deck