JavaScript - DOMコレクション

こんにちは、未来のプログラマーさんたち！今日は、JavaScriptのDOMコレクションの fascinante な世界に飛び込みます。プログラミングが初めての方でも心配しないでください。私はあなたをこの旅にステップバイステップで案内します。私の教え子たちに何年間も行ってきたように。では、コーヒー（またはあなたのお気に入りの飲み物）を手に取り、始めましょう！

HTMLCollectionオブジェクト

図書館にいると、JavaScriptに関するすべての本を見つけたいと思っています。司書が特別なカートにこれらの本すべてを入れてくれます。ウェブ開発の世界では、このカートはHTMLCollectionに似ています。JavaScriptを使って操作できるHTML要素のコレクションです。

HTMLCollectionとは？

HTMLCollectionは、ウェブページ上のHTML要素のコレクションを表すリストのようなオブジェクトです。これは「ライブ」であり、基盤となるドキュメントが変更されたときに自動的に更新されます。

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

<div class="book">JavaScript Basics</div>
<div class="book">Advanced JavaScript</div>
<div class="book">DOM Manipulation</div>

<script>
let books = document.getElementsByClassName('book');
console.log(books);
console.log(books.length); // 出力: 3
</script>

この例では、booksはクラス名が「book」のすべての要素を含むHTMLCollectionです。lengthプロパティは、コレクション内の要素数を教えてくれます。

HTMLCollection内の要素にアクセスする

HTMLCollection内の要素には、配列と同じようにアクセスできます：

console.log(books[0].innerText); // 出力: "JavaScript Basics"
console.log(books[1].innerText); // 出力: "Advanced JavaScript"
console.log(books[2].innerText); // 出力: "DOM Manipulation"

しかし、HTMLCollectionは配列とはまったく異なることを覚えておいてください。配列のような感じですが、配列が持つすべてのメソッドを持っていません。

HTMLCollectionをループする

HTMLCollection内のすべての要素を反復するには、forループを使用します：

for (let i = 0; i < books.length; i++) {
console.log(books[i].innerText);
}

もしくは、より現代的なアプローチとして、HTMLCollectionを配列に変換して配列メソッドを使用します：

Array.from(books).forEach(book => {
console.log(book.innerText);
});

documentオブジェクトとDOM要素のコレクション

HTMLCollectionを理解したので、DOM要素のコレクションを作成する一般的な方法を見てみましょう。

document.getElementsByTagName()

このメソッドは、指定されたタグ名を持つ要素のHTMLCollectionを返します。

<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>

<script>
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // 出力: 3

for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
</script>

document.getElementsByClassName()

前に見た方法ですが、もう少し深く掘り下げてみましょう：

<div class="fruit">Apple</div>
<div class="fruit">Banana</div>
<div class="fruit">Orange</div>

<script>
let fruits = document.getElementsByClassName('fruit');
console.log(fruits.length); // 出力: 3

Array.from(fruits).forEach(fruit => {
console.log(fruit.innerText);
});
</script>

document.querySelectorAll()

この強力なメソッドは、CSSセレクターに一致するすべての要素のNodeList（HTMLCollectionに似ています）を返します：

<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>

<script>
let items = document.querySelectorAll('ul .item');
console.log(items.length); // 出力: 3

items.forEach(item => {
console.log(item.innerText);
});
</script>

querySelectorAll()メソッドで返されるNodeListは、HTMLCollectionとは異なり、ライブではなく、forEachメソッドを内蔵しています。

コレクションメソッドの比較

以下の表に、私たちが議論したコレクションメソッドをまとめます：

メソッド	返す値	ライブ？	使用用途
getElementsByTagName()	HTMLCollection	はい	特定のタグの要素が必要なとき
getElementsByClassName()	HTMLCollection	はい	特定のクラスを持つ要素が必要なとき
querySelectorAll()	NodeList	いいえ	CSSセレクターに一致する要素が必要なとき

「ライブ」は、DOMが変更されたときにコレクションが自動的に更新されることを意味します。

結論

そして、ここまで亲爱的学生们！私たちはDOMコレクションの地を旅しました。HTMLCollectionからDOM要素を集めるさまざまな方法まで。これらのツールは、JavaScriptを使ってウェブページを操作するために基本的なものであり、要素を選択して簡単に修正することができます。

これらの概念を練習すると、DOM操作に慣れてきます。楽器を演奏することに似ています。最初は難しいように思えますが、練習を重ねると美しいウェブの交響曲を創作できるようになります！

プログラミングをマスターする鍵は練習と好奇心です。これらのメソッドを試してみてください。さまざまなシナリオを試し、最も重要なのは、コーディングを楽しむことです！

次回まで、ハッピーコーディング！

Credits: Image by storyset