Rumah > Artikel > hujung hadapan web > NodeList vs HTMLCollection: Perbezaan Antara Koleksi Langsung dan Statik

NodeList vs HTMLCollection: Perbezaan Antara Koleksi Langsung dan Statik

Mary-Kate Olsenasal: 2024-11-06 13:00:03827semak 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>





<pre class="brush:php;toolbar:false">const selected = document.getElementsByClassName("items")
console.log(selected)

Output :

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

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>





<pre class="brush:php;toolbar:false">const selected = document.getElementsByClassName("card")
console.log(selected)
selected[0].innerHTML += `<li>



<p><strong>Output</strong> : </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173086920639726.jpg" alt="NodeList vs HTMLCollection: The Difference Between Live and Static Collections"></p>

<p>As can be seen from the output, when a new HTML tag is added to the element with the card class, the <strong>HTMLCollection</strong> is updated <strong>because it is live</strong></p>


<hr>

<h2>
  
  
  2. NodeList
</h2>

<p><strong>querySelectorAll()</strong> returns a <strong>static</strong> <strong>(non live)</strong> <strong>NodeList</strong> representing a list of the document's elements that match the specified group of selectors. but <strong>childNodes</strong> return a <strong>live NodeList</strong>. </p>

<p><strong>Example</strong> :<br>
</p>

<pre class="brush:php;toolbar:false"><!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>





<pre class="brush:php;toolbar:false">const selected = document.querySelectorAll(".items")
console.log(selected)

Output :

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

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">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList dan HTMLCollection</title>
</head>
<badan>
    <div>





<pre class="brush:php;toolbar:false">const dipilih = document.querySelectorAll(".kad")
dipilih[0].innerHTML = `<li>



<p><strong>Output</strong> : </p>

Pelayar

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

Konsol

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

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">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList dan HTMLCollection</title>
</head>
<badan>
    <div>





<pre class="brush:php;toolbar:false">const dipilih = document.querySelector(".kad")
selected.innerHTML = `<li>



<p><strong>Output</strong> : </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173086921039201.jpg" alt="NodeList vs HTMLCollection: The Difference Between Live and Static Collections"></p>

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


<hr>

<h2>
  
  
  Kesimpulan
</h2>

<p><strong>Kesimpulannya, HTMLCollection sentiasa menjadi koleksi langsung. NodeList selalunya merupakan koleksi statik.</strong></p>

<p>Kami telah memeriksa apakah <strong>NodeList</strong> dan <strong>HTMLCollection</strong> itu. Kini anda tahu apa itu <strong>NodeList dan HTMLCollection</strong>.</p>

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

html Static Array Object const class Length Property Collection console number dom innerHTML viewport li

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：Bagaimana untuk menggunakan Jenis Bersyarat dalam skrip taip?Artikel seterusnya：Bagaimana untuk menggunakan Jenis Bersyarat dalam skrip taip?

Artikel berkaitan

Lihat lagi