ホームページ >ウェブフロントエンド >jsチュートリアル >NodeList と HTMLCollection: ライブ コレクションと静的コレクションの違い
NodeList と HTMLCollection: ライブ コレクションと静的コレクションの違い
- Mary-Kate Olsenオリジナル
- 2024-11-06 13:00:03896ブラウズ
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)
出力 :
基礎となるドキュメントが変更されると、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)
出力 :
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 = `
出力 :
- ブラウザ
- コンソール
出力からわかるように、新しい 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 = `
出力 :
出力からわかるように、新しい HTML タグがカード クラスの要素に追加されると、NodeList が更新されます。ライブであるため。
結論
結論として、HTMLCollection は常にライブ コレクションです。 NodeList は、ほとんどの場合、静的コレクションです。
NodeList と HTMLCollection が何であるかを調べました。 NodeList と HTMLCollection が何であるかがわかりました。
以上がNodeList と HTMLCollection: ライブ コレクションと静的コレクションの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。