JavaScript - DOMノードリスト

DOMノードリストへの導入

こんにちは、Web開発者を目指している皆さん！今日は、JavaScriptのDOMノードリストの世界に興味深く飛び込みます。プログラミングが初めての方でも心配しないでください。私はあなたの親切なガイドとして、ステップバイステップで進めます。このチュートリアルの終わりまでに、プロのようにWebページを操作できるようになるでしょう！

JavaScript - DOM Node Lists

DOMノードリストとは？

まず、基本から始めましょう。Webページを家系図と考えます。DOM（Document Object Model）は、Webページにとってその家系図です。ページ上の各要素－パラグラフ、ボタン、画像など－はこの家族の一員、または技術的な用語で言うと「ノード」です。

ノードリストは、これらのノードの集合体です。パーティーのゲストリストのように考えましょう。それぞれのゲストがあなたのWebページの要素です。

例1: ノードリストの取得

簡単な例を見てみましょう：

<div>
<p>パラグラフ1</p>
<p>パラグラフ2</p>
<p>パラグラフ3</p>
</div>

<script>
let paragraphs = document.querySelectorAll('p');
console.log(paragraphs);
</script>

この例では、querySelectorAll('p')はすべての<p>要素を含むノードリストを返します。ブラウザのコンソールでこれを実行すると、以下のような出力が見られます：

NodeList(3) [p, p, p]

これは、3つのパラグラフ要素を含むノードリストであることを示しています。

ノードリストの操作

ノードリストを手に入れたので、それで何ができるか見てみましょう！

例2: ノードリストの反復

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach((paragraph, index) => {
console.log(`パラグラフ${index + 1}: ${paragraph.textContent}`);
});

このコードの出力は以下の通りです：

パラグラフ1: パラグラフ1
パラグラフ2: パラグラフ2
パラグラフ3: パラグラフ3

ここでは、forEachメソッドを使って、ノードリスト内の各パラグラフを反復しています。パーティーのゲストリストを順繰りに greeting するようなものです！

ライブと静的ノードリストの魔法

ここで興味深い部分に移ります。ノードリストは「ライブ」または「静的」のどちらかです。

ライブノードリストは、パーティーに来たり去ったりする人々のように、自分で更新されるゲストリストのようです。対照的に、静的ノードリストは特定の瞬間のゲストリストのスナップショットのように、新しいゲストが来ても変更されません。

例3: ライブノードリスト

<ul id="guestList">
<li>アリス</li>
<li>ボブ</li>
</ul>

<script>
let guests = document.getElementsByTagName('li');
console.log(guests.length); // 出力: 2

let newGuest = document.createElement('li');
newGuest.textContent = 'チャーリー';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // 出力: 3
</script>

この例では、getElementsByTagNameはライブノードリストを返します。チャーリーをリストに追加すると、guestsノードリストは自動的に更新されます！

例4: 静的ノードリスト

<ul id="guestList">
<li>アリス</li>
<li>ボブ</li>
</ul>

<script>
let guests = document.querySelectorAll('li');
console.log(guests.length); // 出力: 2

let newGuest = document.createElement('li');
newGuest.textContent = 'チャーリー';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // 依然として出力: 2
</script>

ここでは、querySelectorAllは静的ノードリストを返します。チャーリーを追加しても、guestsノードリストは変更されません。写真を撮ったゲストリストのように、新しいゲストが来ても更新されません。

HTMLCollectionとNodeListの違い

さて、DOMの家族の2人のおじさんについて話しましょう。HTMLCollectionとNodeListは似ているですが、それぞれ独自の特徴があります。

HTMLCollection

HTMLCollectionは常にライブです。常に更新されるゲストリストのようです。

let divs = document.getElementsByTagName('div'); // HTMLCollectionを返します

NodeList

NodeListはライブでも静的でもできます。

let paragraphs = document.querySelectorAll('p'); // 静的NodeListを返します
let childNodes = document.body.childNodes; // ライブNodeListを返します

以下に、その違いをまとめた表を示します：

特性	HTMLCollection	NodeList
ライブ/静的	常にライブ	ライブまたは静的
コンテンツ	要素ノードのみ	すべてのノードタイプ
アイテムのアクセス	名前、id、インデックス	インデックスのみ
forEachメソッド	利用不可	利用可能

結論

そして、皆さん！DOMノードリストの土地を旅しました。基本概念からライブと静的リストの微妙な違いまで。実践を積むことで完璧になります。これらの例を試し、それを改造してみてください。そしてすぐに、熟練した開発者のようにWebページを操作できるようになるでしょう！

別れ際に、少しのWeb開発者ジョークをどうぞ：なぜJavaScript開発者が眼鏡をかけていたのでしょうか？C#が見えなかったからです！（Cシャープのことですね？それでは自分で外に出てください…）

コードを続け、学び続け、そして最も重要なのは、JavaScriptを楽しみましょう！

Credits: Image by storyset

前のチュートリアル:

JavaScript - DOMコレクション

次のチュートリアル:

JavaScript - Ajax