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

  • mram Administrateur

    Votre sélecteur CSS est juste mais il manque le point-virgule en fin de ligne 1.

  • mram Administrateur

    J'ai modifié la correction pour que l'exercice soit validé si le sélecteur CSS est juste (ce qui est la priorité de l'exercice) même si la syntaxe n'est pas parfaite (point-virgule manquant, etc.).

  • mram Administrateur

    Instruction 2 : on demande de récupérer le <li> qui est le premier enfant de <ul>, là vous sélectionnez tous les <li> contenu dans un <ul> ...

  • jovidal

    ça fonctionne aussi ça: var result = document.querySelector("ul > li"); alert(result); ? J'avais oublié le "first-child" :o

39 Commentaires

  • mram

    mram Administrateur

    Votre sélecteur CSS est juste mais il manque le point-virgule en fin de ligne 1.

    le 16/11/2016 à 19h55

  • mram

    mram Administrateur

    J'ai modifié la correction pour que l'exercice soit validé si le sélecteur CSS est juste (ce qui est la priorité de l'exercice) même si la syntaxe n'est pas parfaite (point-virgule manquant, etc.).

    le 16/11/2016 à 19h56

  • mram

    mram Administrateur

    Instruction 2 : on demande de récupérer le <li> qui est le premier enfant de <ul>, là vous sélectionnez tous les <li> contenu dans un <ul> ...

    le 20/10/2016 à 12h51

  • jovidal

    jovidal

    ça fonctionne aussi ça: var result = document.querySelector("ul > li"); alert(result); ? J'avais oublié le "first-child" :o

    le 06/06/2017 à 14h00

  • pascal-ds

    pascal-ds

    bonjour, je pense qu'il faut utiliser first-child quelque part, mais il semble que je ne trouve pas la bonne synthaxe. Pourtant ul > li:first-child est bien un élément li qui est le 1er enfant d'un élément ul, non ? (définition trouvée sur 3W.org) j'ai le message : "Avez-vous utilisé un sélecteur css correct et affecté le résultat à "result" ?", le script semble s'exécuter...

    le 05/09/2016 à 11h47

  • patricerameaux

    patricerameaux

    "avez-vous utilisé un selecteur css correct ?" pourquoi ?

    le 19/10/2016 à 13h57

  • mram

    mram Administrateur

    Oui il faut utilisez :first-child. Après avec les sélecteurs css il y a plusieurs moyens de cibler un élément dans le DOM. Dans la correction je vérifie 4 possibilités et il n'y a pas la votre bien qu'elle soit juste (et c'est volontaire). En effet, vous utilisez le sélecteur "enfant direct" qui est ">", or dans l'énoncé il est simplement dit le premier enfant <li> de <ul> et pas le premier enfant direct. Alors oui ça marche, mais ça surcharge pour rien : en CSS il faut juste utiliser le sélecteur le plus simple qui permet de faire ce que l'on souhaite. Un sélecteur CSS complexe a une spécificité plus grande et est prioritaire par rapport à un sélecteur plus simple qui fera la même chose. Je vous invite à vous documenter sur les notions de priorité et de spécificité des sélecteurs en CSS.

    le 05/09/2016 à 14h33

  • patricerameaux

    patricerameaux

    regardez mon code : pourquoi ça ne marche pas ?

    le 19/10/2016 à 11h16

  • mram

    mram Administrateur

    *utiliser (j'écris toujours trop vite...)

    le 05/09/2016 à 14h34

  • egravouil

    egravouil

    Bonjour quand je souhaite validé mon code cela affiche "Avez-vous utilisé un sélecteur css correct et affecté le résultat à "result" ?" Pourtant je crois avoir le bon code... var result = document.querySelector("ul > li:first-child"); alert(result); Pouvez-vous m'éclairer ?

    le 21/09/2016 à 12h59

  • pascal-ds

    pascal-ds

    ah, là c'est la notion d'enfant "pas direct" qui m'échappe...

    le 06/09/2016 à 08h43

  • ea_kouassi

    ea_kouassi

    @mram s'il te plait tu m'aides ?? /* var result; result = document.querySelector('ul li'); // ici j'ai essayé avec les doubles cotes, indentation; tout mais le message d'erreur affiche tjrs alert(result); */

    le 07/11/2016 à 11h35

  • mram

    mram Administrateur

    Par exemple, un <ul> qui contient un <li> qui lui-même contient un <a>. "li" est enfant direct de "ul", "a" est enfant direct de "li", ET "a" est enfant non direct (donc un descendant) de "ul". Donc "ul > li" cible tous les "li" qui sont juste après un "ul" MAIS "ul li" cible tous les "li" contenu dans un "ul" même si il y a des balises intermédiaires entre "ul" et "li".

    le 06/09/2016 à 14h08

  • mram

    mram Administrateur

    Alors dans votre code vous récupérez tous les <li> contenus dans <ul> or nous souhaitons récupérer que le premier, donc "ul li" ne suffit pas, il faut ajouter quelquechose juste après...

    le 08/11/2016 à 15h05

  • mram

    mram Administrateur

    Non ça ne fonctionnera pas car là vous sélectionnez tous les "li" qui sont enfants directs d'un "ul".

    le 07/06/2017 à 14h32

  • mickael.59300

    mickael.59300

    quand je test mon code sur https://jsfiddle.net/ il marche.... mais ici, il me donne un message d'erreur.... :/ pourquoi? mon message d'erreur : Avez-vous utilisé un sélecteur css correct et affecté le résultat à "result" ? mon code : var result = document.querySelector("ul li"); alert(result.innerHTML);

    le 06/04/2017 à 18h45

  • bsmeyers84

    bsmeyers84

    AVEZ-VOUS UTILISÉ UN SÉLECTEUR CSS CORRECT ET AFFECTÉ LE RÉSULTAT À "RESULT" ?

    le 22/09/2016 à 17h34

  • mram

    mram Administrateur

    @egravouil et @bsmeyers84 : dans le sélecteur CSS, il suffit d'enlever le chevron ">", ça marche avec mais sans c'est plus simple et tout aussi fonctionnel :)

    le 22/09/2016 à 23h04

  • mram

    mram Administrateur

    il faut sélectionner le "li" qui est le premier enfant, donc un seul "li". Là vous sélectionnez tous les "li". Et ligne 2 il faut juste faire un alert de "result".

    le 11/04/2017 à 15h57

  • cdezandee

    cdezandee

    var result = document.querySelector("li:first-child") alert(result);

    le 15/11/2016 à 15h14

  • willy.julan

    willy.julan

    bonjour, j'ai cela : Avez-vous utilisé un sélecteur css correct et affecté le résultat à "result" ?

    le 29/07/2016 à 11h52

  • mram

    mram Administrateur

    Et oui, là vous récupérez tous les <li> qui sont enfants directs de <ul>, donc les 3 <li> et pas le premier.

    le 31/07/2016 à 23h28

  • armand1807

    armand1807

    mon code est t-il bon ?

    le 18/08/2017 à 12h08

  • mram

    mram Administrateur

    Bonjour, oui votre code est correct :)

    le 22/08/2017 à 12h50

  • alexismoquet

    alexismoquet

    est-ce bon ? var result = document.querySelector("ul > li"); alert(result);

    le 02/10/2017 à 12h49

  • mram

    mram Administrateur

    Bonjour, non ce n'est pas le bon sélecteur CSS. Il faut sélectionner le premier "li".

    le 03/10/2017 à 22h07

  • simon.fred

    simon.fred

    Bonjour, je ne comprend pas cette exercice car la leçon explique autre chose par rapport à la selection du 1er enfant. La leçon dit :"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." Donc faire un "ul>li" devrait suffir à sélectionner seulement le 1er enfant de ul si je comprend bien ? Mais dans vos commentaires, vous dites que "ul>li" selectionne tous les "li". Pourriez vous m'aider car je pense que je dois mal comprendre un truc :) voici mon code : "var result = document.querySelector("ul>li"); alert(result);"

    le 12/12/2017 à 16h02

  • triplaxs

    triplaxs

    var result; result = document.querySelector("li"); alert(result);Bonjour,Mon code est t-il bon ?

    le 04/09/2017 à 17h03

  • mram

    mram Administrateur

    Bonjour, non il n'est pas correct. On souhaite récupérer le premier "li" seulement.

    le 06/09/2017 à 11h35

  • simon.fred

    simon.fred

    Re bonjour, a chaque fois que j'ecris un commentaire, je trouve la solution 3min après :) sorry. alors que je passe au moins 40min à tous relire grrrr! Par contre je souhaiterais quand même une petite explication sur la leçon et l'exercice. Dans la leçon il y a cet avertissement "Attention, cette fonction ne récupère que le premier élément HTML correspondant" Alors que juste avant il est indiqué "Ici, on sélectionne tous les p qui sont des enfants directs d'un div". je voudrais seulement une petite explication en plus :) merci

    le 12/12/2017 à 16h17

  • mram

    mram Administrateur

    Bonjour, il faut faire la différence entre le sélecteur CSS et la fonction Javascript. SI on écrit " document.querySelector('div > p') " : Le sélecteur CSS "div > p" sélectionne bien tous les "p" qui sont dans un "div" mais la fonction Javascript querySelector() ne va conserver que le premier, pour les conserver tous il faut utiliser .querySelectorAll()

    le 14/12/2017 à 21h31

  • simon.fred

    simon.fred

    Bonjour :) merci pour l'explication très clair ! j'ai bien compris :))))

    le 15/12/2017 à 08h37

  • 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 à 15h13

  • 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 à 14h35

  • mram

    mram Administrateur

    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 à 19h24

  • mram

    mram Administrateur

    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 à 19h26

  • belespoir38

    belespoir38

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

    le 14/01/2018 à 14h39

  • mram

    mram Administrateur

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

    le 17/01/2018 à 19h27

  • belespoir38

    belespoir38

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

    le 14/01/2018 à 14h48

  • mram

    mram Administrateur

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

    le 17/01/2018 à 19h27

  • brunocarriere

    brunocarriere

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

    le 08/01/2018 à 19h20

  • mram

    mram Administrateur

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

    le 12/01/2018 à 01h48

  • triplaxs

    triplaxs

    var result = document.querySelector("ul>li"); alert(result);;Bonjour,Mon code est t-il bon ?

    le 08/09/2017 à 08h23

  • mram

    mram Administrateur

    Bonjour, non le sélecteur utilisé n'est pas le bon. On souhaite récupérer le premier li uniquement.

    le 12/09/2017 à 16h01

  • 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 à 21h38

  • mram

    mram Administrateur

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

    le 29/04/2018 à 04h03

  • 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 à 12h11

  • mram

    mram Administrateur

    le 25/02/2018 à 01h48

  • mram

    mram Administrateur

    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 25/02/2018 à 01h52

  • 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 à 15h38

  • bot666

    bot666

    pouvez vous expliquer?

    le 10/01/2018 à 15h39

  • mram

    mram Administrateur

    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 à 02h16

  • philgd28

    philgd28

    Bon comme d'hab sa ne passe pas, mais sa fonctionne avec l'éditeur de code Brackets et même les 2 autres que j'ai mis en commentaire. Il me signale que le premier li.

    le 17/08/2017 à 20h27

  • mram

    mram Administrateur

    Oui votre code est correct :)

    le 17/08/2017 à 20h50

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>