NodeList vs HTMLCollection: Perbezaan Antara Koleksi Langsung dan Statik-tutorial js-php.cn

NodeList vs HTMLCollection: Perbezaan Antara Koleksi Langsung dan Statik

Mary-Kate Olsen

Lepaskan： 2024-11-06 13:00:03

asal

826 orang telah melayarinya

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)

Salin selepas log masuk

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)

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!