Comment lire dynamiquement toutes les étendues d'un div ?-js tutoriel-php.cn

Comment lire dynamiquement toutes les étendues d'un div ?

王林

Libérer： 2023-09-02 18:37:02

avant

1236 Les gens l'ont consulté

Comment lire dynamiquement toutes les étendues dun div ?

Lors de la création d'une page Web, un élément HTML peut contenir plusieurs éléments HTML imbriqués. Dans certains cas, un développeur peut avoir besoin de lire un élément HTML pour un élément HTML spécifique. Dans notre cas, nous devons lire tous les éléments span de l'élément div et extraire leur contenu.

Dans ce didacticiel, nous apprendrons à utiliser JavaScript pour lire le contenu de toutes les étendues d'un élément div et l'ajouter à nouveau à la page Web de manière formatée.

Grammaire

Les utilisateurs peuvent utiliser JavaScript pour lire dynamiquement toutes les plages d'éléments div selon la syntaxe suivante.

var spans = div.getElementsByTagName("span");
for (var i = 0; i < spans.length; ++i) {
   output.innerHTML += spans[i].innerHTML + "<br>";
}

Copier après la connexion

Dans la syntaxe ci-dessus, nous obtenons l'élément "span" par nom de balise et lisons tous les éléments span un par un.

Exemple 1

Dans l'exemple ci-dessous, nous avons créé un élément div contenant l'identifiant "myDIv". De plus, nous avons ajouté 5 éléments span avec un contenu différent.

En JavaScript, nous utilisons l'identifiant de l'élément div pour y accéder. Après cela, nous accédons à tous les éléments span, qui sont des enfants des éléments div, par leurs noms de balises. Ensuite, nous utilisons une boucle for pour parcourir le tableau d'éléments span et obtenir le code HTML interne de chaque élément span.

Dans la sortie, nous pouvons voir le contenu de l'élément span.

<html>
<body>
    <h2> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h2>
    <div id="myDiv">
        <span> First </span>
        <span> Second </span>
        <span> Third </span>
        <span> Fourth </span>
        <span> Fifth </span>
    </div>
    <br>
    <div id = "output"> </div>
    <script>
        var div = document.getElementById("myDiv");
        var spans = div.getElementsByTagName("span");
        var output = document.getElementById("output");
        for (var i = 0; i < spans.length; ++i) {
            output.innerHTML += spans[i].innerHTML + "<br>";
        }
    </script>
</html>

Copier après la connexion

Exemple 2

Dans l'exemple ci-dessous, nous avons créé un élément div avec un identifiant égal à "content". L'élément div contient plusieurs éléments "

", "" et "" comme enfants dans un ordre aléatoire, mais nous extrayons uniquement l'élément span.

En JavaScript, nous accédons aux éléments div et aux éléments span enfants. Après cela, nous lisons simplement le contenu de l'élément span et ajoutons son contenu à la liste.

<html>
<body>
    <h2> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h2>
    <div id = "content">
        <p> This is the first paragraph. </p>
        <p> This is the second paragraph. </p>
        <span> This is the first span. </span>
        <div> This is a div element. </div>
        <span> This is the second span. </span>
        <span> This is the third span. </span>
        <h2> This is a h2 element </h2>
        <p> This is the third paragraph. </p>
        <span> This is the fourth span. </span>
    </div>
    <br>
    <ul id = "output"> </ul>
    <script>
        var div = document.getElementById("content");
        var spans = div.getElementsByTagName("span");
        var output = document.getElementById("output");
        for (var i = 0; i < spans.length; i++) {
            var li = document.createElement("li");
            li.innerHTML = spans[i].innerHTML;
            output.appendChild(li);
        }
    </script>
</html>

Copier après la connexion

Exemple 3

Dans cet exemple, nous avons ajouté le nom du fruit dans la balise span et son explication dans la balise div. Par conséquent, le div parent contient des éléments span et div comme éléments enfants.

En JavaScript, nous utilisons l'attribut "children" pour obtenir tous les éléments enfants de l'élément div. Après cela, nous parcourons tous les éléments enfants. Dans la boucle for, nous utilisons l'attribut "tagName" pour vérifier si l'élément actuel est un élément "span". Si tel est le cas, nous lisons son contenu et l’ajoutons à la liste. Sinon, nous continuons à itérer.

<html>
<body>
    <h3> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h3>
    <div id = "fruits">
        <span> Apple </span>
        <div> Color: red </div>
        <span> Orange </span>
        <div> Color: orange </div>
        <span> Banana </span>
        <div> Color: yellow </div>
        <span> Watermelon </span>
        <div> Color: green </div>
    </div>
    <h3> Output: </h3>
    <ul id = "output"> </ul>
    <script>
        let fruits = document.getElementById("fruits");
        let children = fruits.children;
        let output = document.getElementById("output");
        for (let i = 0; i < children.length; i++) {
            if (children[i].tagName == "SPAN") {
                output.innerHTML += "<li>" + children[i].innerHTML + "</li>";
            }
        }
    </script>
</html>

Copier après la connexion

Conclusion

Nous avons appris à utiliser JavaScript pour lire dynamiquement tous les éléments span d'un élément div. Dans les deux premiers exemples, nous avons accédé à tous les éléments span, puis les avons parcourus. Dans le troisième exemple, nous parcourons tous les éléments enfants de l'élément div et identifions l'élément span lors de l'itération.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!