Rumah >hujung hadapan web >tutorial js >Bagaimana untuk membaca semua rentang div secara dinamik?

Bagaimana untuk membaca semua rentang div secara dinamik?

王林ke hadapan: 2023-09-02 18:37:021256semak imbas

Apabila membuat halaman web, satu elemen HTML boleh mengandungi berbilang elemen HTML bersarang. Dalam sesetengah kes, pembangun mungkin perlu membaca elemen HTML untuk elemen HTML tertentu. Dalam kes kita, kita perlu membaca semua elemen rentang elemen div dan mengekstrak kandungannya.

Dalam tutorial ini, kita akan belajar menggunakan JavaScript untuk membaca kandungan semua rentang elemen div dan menambahkannya pada halaman web dalam cara yang diformat semula.

Tatabahasa

Pengguna boleh menggunakan JavaScript untuk membaca secara dinamik semua julat elemen div mengikut sintaks berikut.

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

Dalam sintaks di atas, kami mendapat elemen "span" mengikut nama tag dan membaca semua elemen span satu demi satu.

Contoh 1

Dalam contoh di bawah, kami telah mencipta elemen div yang mengandungi id "myDIv". Selain itu, kami menambah 5 elemen rentang dengan kandungan yang berbeza.

Dalam JavaScript, kami menggunakan id elemen div untuk mengaksesnya. Selepas itu, kami mengakses semua elemen span, yang merupakan anak unsur div, dengan nama tagnya. Seterusnya, kami menggunakan gelung for untuk mengulangi tatasusunan elemen span dan mendapatkan HTML dalaman setiap elemen span.

Dalam output, kita boleh lihat kandungan elemen 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>

Contoh 2

Dalam contoh di bawah, kami telah mencipta elemen div dengan id yang sama dengan "kandungan". Elemen div mengandungi berbilang elemen "

", "" dan "" sebagai kanak-kanak dalam susunan rawak, tetapi kami hanya mengekstrak elemen span.

Dalam JavaScript, kami mengakses elemen div dan elemen rentang kanak-kanak. Selepas itu, kami hanya membaca kandungan elemen span dan menambahkan kandungannya pada senarai.

<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>

Contoh 3

Dalam contoh ini, kami telah menambah nama buah dalam tag span dan penjelasannya dalam tag div. Oleh itu, div induk mengandungi elemen span dan div sebagai elemen anak.

Dalam JavaScript, kami menggunakan atribut "kanak-kanak" untuk mendapatkan semua elemen anak elemen div. Selepas itu, kami mengulangi semua elemen kanak-kanak. Dalam gelung for, kami menggunakan atribut "tagName" untuk menyemak sama ada elemen semasa ialah elemen "span". Jika ya, kami membaca kandungannya dan menambahkannya pada senarai. Jika tidak, kami meneruskan lelaran.

<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>

Kesimpulan

Kami belajar menggunakan JavaScript untuk membaca semua elemen rentang elemen div secara dinamik. Dalam dua contoh pertama, kami mengakses semua elemen span dan kemudian mengulanginya. Dalam contoh ketiga, kami mengulangi semua elemen anak unsur div dan mengenal pasti elemen span semasa mengulang.

Atas ialah kandungan terperinci Bagaimana untuk membaca semua rentang div secara dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html for 循环

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Maklumat asas tentang jQuery UI 1.7Artikel seterusnya：Maklumat asas tentang jQuery UI 1.7

Artikel berkaitan

Lihat lagi