NodeList と HTMLCollection: ライブコレクションと静的コレクションの違い-jsチュートリアル-php.cn

NodeList と HTMLCollection: ライブコレクションと静的コレクションの違い

Mary-Kate Olsen

リリース： 2024-11-06 13:00:03

オリジナル

826 人が閲覧しました

NodeList と HTMLCollection を詳しく調べ、NodeList と HTMLCollection.

とは何かを調べます。

まず、どちらもリスト (コレクション) 内の要素の数を返す length プロパティを持っています。

1.HTMLコレクション

HTML DOM 内の

HTMLCollection はライブです。 getElementsByClassName() または getElementsByTagName() は、指定されたすべての クラス名を持つすべての子要素の配列のようなオブジェクトを表すライブ HTMLCollection を返します。 .

例 :

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

ログイン後にコピー

出力 :

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

基礎となるドキュメントが変更されると、HTMLCollection は自動的に更新されます。

例を書いてみましょう:

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

ログイン後にコピー

出力 :

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

querySelectorAll() によって返される NodeList は、非ライブであるため、基になるドキュメントに変更が加えられても自動的に更新されません。

例を書いてみましょう:

<!DOCTYPE html>
<html lang="ja">

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>NodeList と HTMLCollection</title>
</head>

    <div>





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

ログイン後にコピー

出力 :

ブラウザ

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

コンソール

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

出力からわかるように、新しい HTML タグがカードクラスの要素に追加されるとブラウザは更新されますが、NodeList がライブではないため、NodeList は更新されません。 .

childNodes によって返される NodeList は、基礎となるドキュメントが変更されると、ライブであるため、自動的に更新されます。

例 :

<!DOCTYPE html>
<html lang="ja">

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>NodeList と HTMLCollection</title>
</head>

    <div>





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

ログイン後にコピー

出力 :

NodeList vs HTMLCollection: The Difference Between Live and Static Collections