JavaScript DOM
JavaScriptマニュアルJavaScriptでは、HTMLやXMLドキュメントを操作するためにDOM（Document Object Model）が使用されます。
DOMはプログラムからドキュメントを操作するためのAPI（Application Programming Interface）で、ドキュメントの構造や内容、スタイルなどを変更することが可能です。
DOMの基本概念
DOM
DOMは、ドキュメントの構造をツリーとして表現します。
このツリーは「DOMツリー」と呼ばれ、その各要素は「ノード」として表現されます。DOMツリーの一番上にあるノードは「ルートノード」と呼ばれ、HTMLドキュメントではこのルートノードはdocumentオブジェクトとなります。
ノード
ノードにはいくつかの種類があり、要素ノード、テキストノード、属性ノードなどがあります。
- 要素ノード: HTMLの各要素（タグ）を表します。例えば
<p>,<div>,<a>など。 - テキストノード: 要素ノードの中のテキスト内容を表します。
- 属性ノード: 要素ノードの属性を表します。例えば
href,class,idなど。
例えば、HTML要素は要素ノードとして、その中のテキストはテキストノードとして、属性は属性ノードとしてDOMツリーに存在します。
<div id="wrapper">CODINGHAKU</div>
<!--
要素ノード：<div id="wrapper">CODINGHAKU</div>
テキストノード：CODINGHAKU
属性ノード：id="wrapper"
-->DOMの操作
JavaScriptでDOMを操作するための方法は多岐に渡りますが、主に以下の4つの操作が中心となります。
- ノードの選択: ドキュメントから特定のノードを選択するために、
getElementById(),getElementsByClassName(),getElementsByTagName(),querySelector(),querySelectorAll()などのメソッドが利用できます。 - ノードの変更: 選択したノードの内容や属性を変更するために、
.innerHTML,.textContent,.setAttribute(),.removeAttribute()などのメソッドが利用できます。 - ノードの追加・削除: ノードを追加または削除するために、
.createElement(),.createTextNode(),.appendChild(),.insertBefore(),.removeChild(),.replaceChild()などのメソッドが利用できます。 - スタイルの変更: ノードのスタイルを動的に変更するために、
.style.propertyのようにスタイルプロパティを操作することができます。
ノードの選択
JavaScriptでは、以下の主要な方法でノードを選択します。
getElementById(id): ID属性を指定して要素ノードを選択します。IDはドキュメント内で一意であるため、このメソッドは1つの要素を返します。getElementsByClassName(class): クラス名を指定して要素ノードを選択します。このメソッドはマッチしたすべての要素を返します。getElementsByTagName(tag): タグ名を指定して要素ノードを選択します。このメソッドはマッチしたすべての要素を返します。querySelector(selector): CSSセレクタを指定して要素ノードを選択します。このメソッドは最初にマッチした要素を返します。querySelectorAll(selector): CSSセレクタを指定して要素ノードを選択します。このメソッドはマッチしたすべての要素を返します。
以下に、各メソッドを使ってノードを選択する基本的な例を示します。
// idが"myHeading"の要素を選択
var heading = document.getElementById("myHeading");
// クラス名が"highlight"の要素をすべて選択
var highlights = document.getElementsByClassName("highlight");
// "p"タグの要素をすべて選択
var paragraphs = document.getElementsByTagName("p");
// CSSセレクタを使用して要素を選択
var firstHighlight = document.querySelector(".highlight");
// CSSセレクタを使用して要素をすべて選択
var allHighlights = document.querySelectorAll(".highlight");ノードの変更
JavaScriptでノードを変更するには、以下の主要なプロパティやメソッドを使用します。
innerText: ノードのテキスト内容を取得または設定します。innerHTML: ノードのHTML内容を取得または設定します。setAttribute(name, value): ノードの属性を設定します。removeAttribute(name): ノードの属性を削除します。
以下に、各プロパティやメソッドを使ってノードを変更する基本的な例を示します。
// idが"myHeading"の要素を選択
var heading = document.getElementById("myHeading");
// テキスト内容を変更
heading.innerText = "新しい見出し";
// HTML内容を変更
heading.innerHTML = "<em>新しい見出し</em>";
// 属性を設定
heading.setAttribute("class", "highlight");
// 属性を削除
heading.removeAttribute("class");ノードの追加・削除
JavaScriptでノードを追加・削除するための主要なメソッドは以下のとおりです。
createElement(tagName): 指定したタグ名の新しい要素を作成します。createTextNode(data): 新しいテキストノードを作成します。appendChild(childNode): 指定した子ノードを現在のノードの最後に追加します。removeChild(childNode): 指定した子ノードを現在のノードから削除します。
以下に、各メソッドを使ってノードを追加・削除する基本的な例を示します。
// 新しい要素とテキストノードを作成
var newElement = document.createElement("p");
var newText = document.createTextNode("新しいパラグラフ");
// テキストノードを新しい要素に追加
newElement.appendChild(newText);
// 新しい要素をDOMに追加
document.body.appendChild(newElement);
// idが"oldElement"の要素を選択
var oldElement = document.getElementById("oldElement");
// 既存の要素をDOMから削除
document.body.removeChild(oldElement);スタイルの変更
JavaScriptを使用してDOMのスタイルを変更するには、style プロパティを使用します。
style プロパティは、要素のstyle属性に対応しており、CSSスタイルを直接変更することができます。
// 要素の選択
var element = document.getElementById("myElement");
// スタイルの変更
element.style.color = "blue"; // テキストの色を青に変更
element.style.backgroundColor = "#f8f8f8"; // 背景色の変更
element.style.border = "1px solid black"; // ボーダーの変更このように、style プロパティを通じて要素のCSSプロパティを直接変更することができます。
以上がDOMの基本的な概念と操作方法です。
これらの基本を理解することで、JavaScriptを使ってウェブページを動的に制御する能力を身につけることができます。
コメント