プレゼンテーションシナリオ: スライド107、108、109
スライド107、108、109では、JavaScript HTML DOM - DOM内の要素へのアクセスと変更について説明します。
Webページのコンテンツやスタイルを変更するには、まず操作したいHTML要素を見つけてアクセスする必要があります。JavaScriptはこれを行うための多くの方法を提供しています：
2.1. タグのidで取得する構文 document.getElementById("id")
これは単一の要素を返します（idはページ内で一意であるため）。
例: HTMLに次のような<p>タグがあります：<p id="demo">Hello!</p>
このHTML内の<p>タグにアクセスするには、JavaScript側で次のように記述します：
let element = document.getElementById("demo");
ただし、ここで止まると、elementという名前の変数を作成しただけです。この変数はid = "demo"のHTML要素を参照しています。しかし、まだその要素に対して何もしていません。
<p>タグに何か変更を加えたい場合は、その後にコマンドを追加する必要があります。例：
コンテンツを変更:
element.innerHTML = "Hello DOM!";
element.innerHTML：これはタグ内のHTMLコンテンツを取得し、タグ内のHTMLコンテンツを変更することを意味します。
文字色を変更:
element.style.color = "red";
この時点で、JSは実際にHTML要素に作用します。
2.2. タグのclassで取得する構文 document.getElementsByClassName("className")
同じclassを持つすべての要素を検索します。
HTMLCollectionを返します（配列に似ていますが、完全な配列ではありません）。
例:
<p class="note">Note 1</p>
<p class="note">Note 2</p>
let elements = document.getElementsByClassName("note");
elements[0].style.color = "red"; // Change the color of the first element
ここで、elementsはclass="note"を持つすべてのタグを含むコレクションです。各要素にアクセスするには、配列のようにインデックスを使用します：elements[0]、elements[1]、...
その他、いくつかのアクセス構文もあります（詳しくは自分で参照できます）：
2.3. document.getElementsByTagName("tagName")
- タグ名（例："p"、"div"、"h1"など）でタグを検索します。
- 結果としてHTMLCollectionを返します（配列のように走査できます）。
2.4. document.querySelector("selector")
- CSSセレクタ構文を使用して要素を検索します。
- 最初にマッチする要素のみを返します。
- 非常に柔軟：#id、.class、tag、または複雑なセレクタの組み合わせで検索できます。
2.5. document.querySelectorAll("selector")
- 同様にCSSセレクタを使用しますが、マッチするすべての要素を返します。
- 結果はNodeListです（forEachで走査できます）。
比較＆いつ使うか？
- getElementById → 最速、要素が一意のidを持つ場合に使用します。
- getElementsByClassName / TagName → classまたはタグで複数の要素を取得したい場合に使用します。
- querySelector / querySelectorAll → 最も柔軟、CSSに似た構文。書きやすく読みやすいため、実際によく使われます。
以上で、JavaScript DOMを通じてHTML要素にアクセスして操作するさまざまな方法についての説明を終わります。