Accession au DOM et sélection d'éléments

30 min Niveau 2

Introduction

Nous allons ici comprendre pourquoi jQuery est une bonne option pour les opérations de manipulation HTML DOM, et présenter les différents outils fournis par jQuery pour sélectionner, insérer, modifier ou supprimer des éléments ou des attributs.

La sélection d’éléments en jQuery

Le moyen le plus simple de sélectionner des éléments HTML dans jQuery est d'utiliser des sélecteurs CSS.

Par exemple, nous pouvons sélectionner l’élément ayant la classe container de la manière suivante :

$(document).ready(function () {
    /*
    Sélection des éléments du DOM ayant la classe “container”
    */
    $(".container");
});

JQuery fournit également la possibilité de sélectionner certains éléments spécifiques grâce aux "pseudo sélecteur".

Il en existe plusieurs, parmis lesquels :

:input pour cibler les éléments input, textarea, select et button

<body>
    <input type="text" value="Nom:" />
    <span id="count"></span>
    <script type="text/javascript">
        $(document).ready(function () {
            //Affiche le nombre d'élément checked
            $("#count").text($(":input").length);
        });
    </script>
</body>

:checked pour cibler les éléments cochés pour les input de type checkbox, radio ou des éléments d’une liste select

<body>
    <input type="checkbox" checked/>
    <input type="checkbox" />
    <span id="count"></span>
    <script type="text/javascript">
        $(document).ready(function () {
            //Affiche le nombre d'élément checked
            $("#count").text($("input:checked").length);
        });
    </script>
</body>

:selected pour cibler les éléments option sélectionnés dans une liste select

<body>
    <select>
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
    </select>
    <span id="count"></span>
    <script type="text/javascript">
        $(document).ready(function () {
            //Affiche le nombre d'option selected
            $("#count").text($("select option:selected").length);
        });
    </script>
</body>

:disabled pour cibler les éléments input qui ont comme attribut disabled

<body>
    <input type="text" disabled>
    <input type="text">
    <span id="count"></span>
    <script type="text/javascript">
    $(document).ready(function () {
        //Affiche le nombre d'input disabled
        $("#count").text($("input:disabled").length);
    });
    </script>
</body>

:enabled pour cibler les éléments qui ne possèdent pas l’attribut disabled

<body>
    <input type="text" enabled>
    <input type="text">
    <span id="count"></span>
    <script type="text/javascript">
        $(document).ready(function () {
            //Affiche le nombre d'input enabled
            $("#count").text($("input:enabled").length);
        });
    </script>
</body>

La méthode jQuery has()

La méthode has() de jQuery permet d'optimiser la sélection en ne sélectionnant que les éléments qui ont eux-même des éléments enfants correspondants au sélecteur passé en paramètre de la fonction.

Par exemple, nous pouvons sélectionner tous les éléments p d’une page qui contiennent des éléments span :

<body>
    <p id="p1">Un paragraphe <span> écrit en HTML</span></p>
    <span>Un élément span non contenu dans un élément p</span>
    <p id="p2">Un deuxième paragraphe</p>
    <p>Un <span>troisième</span> paragraphe</p>
    <script type="text/javascript">
        $(document).ready(function(){
            // sélection de tous les éléments "<p>" qui contiennent
            // des balises "<span>"
            $("p").has("span");
        });
    </script>
</body>

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !