cari

Rumah >hujung hadapan web >tutorial js >NodeList dan HTMLCollection : Koleksi langsung dan koleksi Statik

NodeList dan HTMLCollection : Koleksi langsung dan koleksi Statik

DDD
DDDasal
2024-11-06 02:46:021012semak imbas

kami akan memeriksa NodeList dan HTMLCollection secara terperinci dan apakah NodeList dan HTMLCollection.

Pertama, Kedua-duanya mempunyai sifat panjang yang mengembalikan bilangan elemen dalam senarai (koleksi).

1. HTMLCollection

HTMLCollection dalam HTML DOM disiarkan secara langsung; getElementsByClassName() atau getElementsByTagName() mengembalikan HTMLCollection secara langsung mewakili objek seperti tatasusunan bagi semua elemen kanak-kanak yang mempunyai semua nama kelas yang diberikan .

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
      <ul class="items">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
      </ul>
      <ul class="items">
        <li>item-5</li>
        <li>item-6</li>
        <li>item-7</li>
        <li>item-8</li>
      </ul>
      <ul class="items">
        <li>item-9</li>
        <li>item-10</li>
        <li>item-11</li>
        <li>item-12</li>
      </ul>
    <script src="/script.js"></script>
</body>
</html>


const selected = document.getElementsByClassName("items")
console.log(selected)

Output :

NodeList and HTMLCollection : Live collection and Static collection

HTMLCollection dikemas kini secara automatik apabila dokumen asas ditukar.

Mari kita tulis contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
    <div class="card" >
        <div class="card-body" id="main">
          <h5 class="card-title">dev community</h5>
          <p class="card-text">dev community sonay kara</p>
          <a href="#" class="btn btn-primary">dev community sonay kara</a>
        </div>
      </div>

    <script src="/script.js"></script>
</body>
</html>


const selected = document.getElementsByClassName("card")
console.log(selected)
selected[0].innerHTML += `<li class="card">dev.to</li>`;
console.log(selected)

Output :

NodeList and HTMLCollection : Live collection and Static collection

Seperti yang dapat dilihat daripada output, apabila teg HTML baharu ditambahkan pada elemen dengan kelas kad, HTMLCollection dikemas kini kerana ia disiarkan secara langsung

2. NodeList

querySelectorAll() mengembalikan statik (bukan langsung) NodeList mewakili senarai elemen dokumen yang sepadan dengan kumpulan yang ditentukan daripada pemilih. tetapi childNodes mengembalikan NodeList langsung.

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
      <ul class="items">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
      </ul>
      <ul class="items">
        <li>item-5</li>
        <li>item-6</li>
        <li>item-7</li>
        <li>item-8</li>
      </ul>
      <ul class="items">
        <li>item-9</li>
        <li>item-10</li>
        <li>item-11</li>
        <li>item-12</li>
      </ul>
    <script src="/script.js"></script>
</body>
</html>


const selected = document.querySelectorAll(".items")
console.log(selected)

Output :

NodeList and HTMLCollection : Live collection and Static collection

NodeList yang dikembalikan oleh querySelectorAll() tidak dikemas kini secara automatik apabila perubahan dibuat pada dokumen asas kerana bukan langsung.

Mari kita tulis contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
    <div class="card" >
        <div class="card-body" id="main">
          <h5 class="card-title">dev community</h5>
          <p class="card-text">dev community sonay kara</p>
          <a href="#" class="btn btn-primary">dev community sonay kara</a>
        </div>
      </div>

    <script src="/script.js"></script>
</body>
</html>


const selected = document.querySelectorAll(".card")
selected[0].innerHTML += `<li class="card">dev.to</li>`;
console.log(selected)

Output :

  • Pelayar

NodeList and HTMLCollection : Live collection and Static collection

  • Konsol

NodeList and HTMLCollection : Live collection and Static collection

Seperti yang dapat dilihat daripada output, apabila teg HTML baharu ditambahkan pada elemen dengan kelas kad, penyemak imbas mengemas kini, tetapi NodeList tidak dikemas kini kerana NodeList tidak disiarkan. .

NodeList yang dikembalikan oleh childNodes dikemas kini secara automatik apabila perubahan dibuat pada dokumen asas kerana ianya langsung.

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
      <ul class="items">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
      </ul>
      <ul class="items">
        <li>item-5</li>
        <li>item-6</li>
        <li>item-7</li>
        <li>item-8</li>
      </ul>
      <ul class="items">
        <li>item-9</li>
        <li>item-10</li>
        <li>item-11</li>
        <li>item-12</li>
      </ul>
    <script src="/script.js"></script>
</body>
</html>


const selected = document.getElementsByClassName("items")
console.log(selected)

Output :

NodeList and HTMLCollection : Live collection and Static collection

Seperti yang dapat dilihat daripada output, apabila teg HTML baharu ditambahkan pada elemen dengan kelas kad, NodeList dikemas kini kerana ia disiarkan secara langsung.

Kesimpulan

Kesimpulannya, HTMLCollection sentiasa menjadi koleksi langsung. NodeList selalunya merupakan koleksi statik.

Kami telah memeriksa apakah NodeList dan HTMLCollection itu. Kini anda tahu apa itu NodeList dan HTMLCollection.

Atas ialah kandungan terperinci NodeList dan HTMLCollection : Koleksi langsung dan koleksi Statik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html Static Array Object class Length Property Collection console number dom
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Adakah Memanfaatkan Penghuraian HTML Penyemak Imbas Cara Paling Cekap untuk Melarikan Diri Entiti Tag HTML?Artikel seterusnya：Adakah Memanfaatkan Penghuraian HTML Penyemak Imbas Cara Paling Cekap untuk Melarikan Diri Entiti Tag HTML?

Artikel berkaitan

Lihat lagi