HTML DOM 要素

HTML DOM 要素 - ウェブページを操作する基盤

説明: このガイドでは、HTML DOM 要素について包括的に解説します。要素のプロパティ、メソッド、JavaScript でのアクセス方法と操作方法を網羅し、ウェブページの動的なインタラクションの中核技術を容易に習得できるようにします。

什么是 HTML DOM 要素？

HTML DOM は、HTML 文書をノードツリーとして扱い、各ノードは要素、属性、テキストなど、文書の一部を表します。
HTML DOM 要素ノードは、以下のようなウェブページの構造を構成する基本的な単位です：
- <div>: 文書内のセクションやブロックを定義するための汎用コンテナ要素。スタイルやレイアウトの適用に使用されます。
- <p>: 段落を表す要素。テキストを段落としてグループ化します。
- <span>: インライン要素で、テキストの一部やコンテンツの一部にスタイルやスクリプトを適用するために使用されます。

HTML DOM 要素へのアクセス

ID によるアクセス: `document.getElementById()` メソッドを使用して、特定の ID を持つ要素を正確に特定します。
```
<div id="myElement"></div>
<script>
  const element = document.getElementById("myElement");
</script>
```
タグ名によるアクセス: `document.getElementsByTagName()` メソッドを使用して、同じタグ名を持つすべての要素のコレクションを取得します。
```
<p>段落 1</p>
<p>段落 2</p>
<script>
  const paragraphs = document.getElementsByTagName("p");
</script>
```
クラス名によるアクセス: `document.getElementsByClassName()` メソッドを使用して、特定のクラス名を持つすべての要素のコレクションを選択します。
```
<div class="myClass">要素 1</div>
<span class="myClass">要素 2</span>
<script>
  const elements = document.getElementsByClassName("myClass");
</script>
```
CSS セレクターによるアクセス: `document.querySelector()` または `document.querySelectorAll()` メソッドを使用して、柔軟な CSS セレクター構文で要素を正確に特定します。
```
<ul>
  <li class="item">項目 1</li>
  <li class="item">項目 2</li>
</ul>
<script>
  const firstItem = document.querySelector("li.item");
  const allItems = document.querySelectorAll("li.item");
</script>
```

HTML DOM 要素の操作

1. 要素の内容の変更

`innerHTML` プロパティを使用して、要素の HTML コンテンツを置き換えます。

<div id="myDiv"></div>
<script>
  document.getElementById("myDiv").innerHTML = "<p>新しいコンテンツ</p>";
</script>

`textContent` プロパティを使用して、要素のプレーンテキストの内容を変更します。

<p id="myParagraph">古いテキスト</p>
<script>
  document.getElementById("myParagraph").textContent = "新しいテキスト";
</script>

2. 要素の属性の変更

`getAttribute()` メソッドを使用して、要素の属性値を取得します。

<a href="https://www.example.com" id="myLink">リンク</a>
<script>
  const link = document.getElementById("myLink");
  const href = link.getAttribute("href");
</script>

`setAttribute()` メソッドを使用して、要素の属性値を設定します。

<img src="old-image.jpg" id="myImage">
<script>
  document.getElementById("myImage").setAttribute("src", "new-image.jpg");
</script>

`removeAttribute()` メソッドを使用して、要素の属性を削除します。

<input type="text" disabled id="myInput">
<script>
  document.getElementById("myInput").removeAttribute("disabled");
</script>

3. 要素のスタイルの変更

要素の `style` プロパティを直接操作します。たとえば、 `element.style.color = "blue"` のようにします。
```
<p id="myParagraph">テキスト</p>
<script>
  document.getElementById("myParagraph").style.color = "blue";
</script>
```

要素のクラス名を変更して、事前に定義された CSS スタイルを間接的に適用します。

<style>
  .highlight {
    background-color: yellow;
  }
</style>
<p id="myParagraph">テキスト</p>
<script>
  document.getElementById("myParagraph").classList.add("highlight");
</script>

4. 要素の作成と挿入

`document.createElement()` メソッドを使用して、新しい HTML 要素を作成します。

<script>
  const newParagraph = document.createElement("p");
  newParagraph.textContent = "新しい段落";
</script>

`appendChild()`、`insertBefore()` などのメソッドを使用して、新しい要素を DOM ツリーの指定された場所に挿入します。

<ul id="myList"></ul>
<script>
  const newListItem = document.createElement("li");
  newListItem.textContent = "新しい項目";

  const myList = document.getElementById("myList");
  myList.appendChild(newListItem);
</script>

5. 要素の削除

`removeChild()` メソッドを使用して、親要素から指定された子要素を削除します。

<ul id="myList">
  <li>項目 1</li>
  <li id="removeItem">項目 2</li>
</ul>
<script>
  const myList = document.getElementById("myList");
  const removeItem = document.getElementById("removeItem");
  myList.removeChild(removeItem);
</script>

イベント処理

HTML DOM では、クリック、マウスの移動、キーボード入力などのイベントリスナーを要素にバインドできます。

`addEventListener()` メソッドを使用して、イベントリスナーを要素に追加し、イベントがトリガーされたときに対応する JavaScript コードを実行します。

<button id="myButton">クリック</button>
<script>
  const myButton = document.getElementById("myButton");
  myButton.addEventListener("click", function() {
    alert("ボタンがクリックされました！");
  });
</script>

まとめ

HTML DOM 要素を習得することは、ウェブページ開発を行う上で不可欠なスキルです。HTML DOM は、ウェブページの構造と内容を操作するための強力なツールを提供し、動的なインタラクション効果を実現します。