Exercice 7/8

Dans le fichier script.js :

  • déclarez la variable result;
  • utilisez document.querySelector() pour récupérer l'élément li qui est le premier enfant de ul et affectez le résultat à result;
  • affichez l'élément avec alert();
  • cliquez sur Soumettre ma réponse.

Leçon 7/8

Il existe un moyen beaucoup plus flexible que les méthodes précédentes pour sélectionner un élément HTML dans le DOM :

.querySelector()

Cette fonction sélectionne un élément en utilisant les sélecteurs css. De ce fait les possibilités sont nombreuses. Il suffit de préciser en paramètres de la fonction un sélecteur css comme vous l'écririez dans un fichier .css

Exemple :

document.querySelector("div > p");

Ici, on sélectionne tous les p qui sont des enfants directs d'un div. Attention, cette fonction ne récupère que le premier élément HTML correspondant. Pas besoin de boucle ici pour parcourir le résultat.

Commentaires les mieux notés

72 Commentaires

  • a.tapiadelcampo-56

    a.tapiadelcampo-56

    Bonjour je n'arrive pas à comprendre mon erreur : var result; result = document.querySelector("ul > li :first-child"); alert(result); Votre variable result ne contient pas le premier li de la balise ul

    le 13/02/2022 à 14h01

  • meriam

    meriam Admin

    Bonjour, il faut pas laisser avant et aprés les deux points de la pseudo classe.

    le 13/02/2022 à 23h24

  • rosa.scimeca-65

    rosa.scimeca-65

    c'est bon j'ai trouvé!!!! Merci

    le 14/12/2021 à 13h54

  • meriam

    meriam Admin

    Au niveau de cette ligne==> var result= document.querySelector("li"); (il faut supprimer le mot var ) result est déja déclaré au début du code

    le 14/12/2021 à 16h44

  • meriam

    meriam Admin

    Vous devez avoir comme ça ==>var result; result= document.querySelector("li"); alert(result);

    le 14/12/2021 à 16h45

  • yan28-81

    yan28-81

    votre script a mis trop de temps à s'exécuter mais pourquoi ??? code : var result; result = document.querySelector("li> ul"); alert(result)

    le 26/11/2021 à 11h27

  • meriam

    meriam Admin

    Bonjour, l'énoncé demande de récupérer le premier li dans la liste, le sélecteur que vous avez choisi permet de sélectionner tous les éléments li directs de la liste.

    le 28/11/2021 à 23h46

  • meriam

    meriam Admin

    Il faut choisir un autre sélecteur qui permet de sélectionner uniquement le 1 er élément li.

    le 28/11/2021 à 23h47

  • rosirisf77-81

    rosirisf77-81

    bonsoir je n'arrive pas a valides aucun de mes exercise, pouvez vous regardez ce qui ne va pas dans mon code svp merci

    le 02/01/2021 à 17h55

  • meriam

    meriam Admin

    Au niveau de la 1 ère ligne, il faut supprimer le signe "=" entre var et result ==> On doit écrire var result;

    le 06/01/2021 à 17h00

  • darek_kozaczek-68

    darek_kozaczek-68

    var result; result = document.querySelector("ul > li"); alert(result); //robot dit : Votre script a mis trop de temps à s'exécuter, auriez-vous une boucle infinie ?

    le 29/06/2020 à 07h24

  • meriam

    meriam Admin

    Bonsoir, vous devez récupérer l'élément li qui est le premier enfant de ul (le sélecteur que vous avez utilisé permet de sélectionner tous les enfants directs li de ul).

    le 29/06/2020 à 18h37

  • zedixa-68

    zedixa-68

    Bonjour, var result; result = document.querySelector("li:first-child"); alert(result); msg d'erreur, boucle infinie

    le 06/06/2020 à 15h21

  • meriam

    meriam Admin

    votre dernier code fonctionne correctement en utilisant les pseudo-classe.

    le 08/06/2020 à 12h17

  • tomschuurman11-13

    tomschuurman11-13

    alors celle la on me l'avait jamais faite encore , dans mon code , dans "document.querySelector()" le querySelector n'est pas pris en compte , il ne s'affiche pas en bleue et le code ne marche donc pas . je ne peu donc pas valider cet exercice pourtant si simple

    le 27/04/2018 à 17h38

  • mram

    mram Admin

    Bonjour, faites le en 2 étapes : déclarer "result" puis sur une ligne à part "result = document..." .

    le 29/04/2018 à 00h03

  • lienmontage

    lienmontage

    Même si on avait déja abordé le "first-child" je ne m'en souvenais plus et si on rajoute ça à la leçon de cet exercice, on est facilement induit en erreur

    le 27/03/2018 à 11h13

  • hantute.kevin-100

    hantute.kevin-100

    Bonjour, dans votre partie "Cours" vous précisez que "querySelector("div > p")" ne récupère que le premier élément "p" de "div". Dans l'exercice vous demandez de récupérer le premier élément "li" de "ul". Pourquoi n'est-ce pas la même chose ? Aussi, la réponse à cet exercice ne se trouve pas dans le cours : nous n'avons jamais abordé la notion ":first-child".

    le 23/02/2018 à 10h11

  • mram

    mram Admin

    Bonjour, si la pseudo classe ":first-child" est abordée ici : https://apprendre-html.3wa.fr/css/css-classes-ids/selecteurs-css/selecteur-pseudo-classe-first-child-css

    le 24/02/2018 à 23h48

  • mram

    mram Admin

    Néanmoins, c'est en effet la même chose avec ul et li . Mais tel que c'est demandé dans l'exercice c'est bien d'utiliser ":first-child"

    le 24/02/2018 à 23h52

  • belespoir38

    belespoir38

    var result; result= document.querySelect ("ul:nth-child(1)"); alert(result); ?

    le 14/01/2018 à 12h48

  • mram

    mram Admin

    Bonjour, la fonction .querySelect() n'existe pas.

    le 17/01/2018 à 17h27

  • belespoir38

    belespoir38

    Si on avait plusieurs paragraphes contenant des ul/li, on procèderait comment ?

    le 14/01/2018 à 12h39

  • mram

    mram Admin

    Tout dépend de ce que l'on souhaite faire, cf mes réponses à votre précédent commentaire.

    le 17/01/2018 à 17h27

  • belespoir38

    belespoir38

    Bonjour, je viens de lire que .querySelector donne le premier enfant, et que donc il n'y a pas besoin de boucle. Alors pourquoi utiliser First-child ? Surtout si elle selectionne 1 seul élément ?

    le 14/01/2018 à 12h35

  • mram

    mram Admin

    Bonjour, il faut faire la différence entre les éléments HTML que l'on peut sélectionner via le sélecteur CSS et ce que récupère ensuite .querySelector(). Ce n'est pas le cas ici mais imaginez que l'on ait plusieurs listes "ul" avec chacune plusieurs "li". Le sélecteur CSS "li:first-child" va sélectionner chaque premier "li" de chaque liste "ul".

    le 17/01/2018 à 17h24

  • mram

    mram Admin

    Si on a 3 listes "ul" alors on aura 3 "li", MAIS querySelector ne va récupérer et conserver que le premier "li" trouver dans le DOM.

    le 17/01/2018 à 17h26

  • bot666

    bot666

    pouvez vous expliquer?

    le 10/01/2018 à 13h39

  • mram

    mram Admin

    Bonjour, si vous utilisez .querySelectorAll("div") vous allez récupérer tous les "div" de la page web. Mais si vous utilisez .querySelector("div") alors seul le premier "div" rencontré dans le code sera récupéré.

    le 12/01/2018 à 00h16

  • bot666

    bot666

    Ici, on sélectionne TOUS les p qui sont des enfants directs d'un div. Attention, cette fonction ne récupère QUE LE PREMIER ELEMENT HTML correspondant.

    le 10/01/2018 à 13h38

  • brunocarriere

    brunocarriere

    Mon code : var result; result = document.querySelector("li:first-child"); alert(result); est c'set bon :)

    le 08/01/2018 à 17h20

  • mram

    mram Admin

    Bonjour, j'ai testé votre code et il fonctionne bien de mon côté, j'ai pu valider l'exercice.

    le 11/01/2018 à 23h48

Pour publier un commentaire, vous devez vous connecter.
index.html
script.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM</title> </head> <body> <h1>Titre h1</h1> <p class="par">Paragraphe 1</p> <h2>Titre h2</h2> <p class="par">Paragraphe 2</p> <ul> <li>Item 1</li> <li>Item 2</li> <li><a href="http://www.google.fr">Item 3</a></li> </ul> <div id="bloc"> <h3>Titre h3</h3> <p class="par">Paragraphe 4</p> </div> <script src="script.js"></script> </body> </html>
http://localhost:8080