コンテンツにスキップ

JavaScript/DOM

出典: フリー教科書『ウィキブックス（Wikibooks）』


Wikipedia
Wikipedia
 ウィキペディアにDocument Object Modelの記事があります。

JavaScriptは、ウェブページをダイナミックに操作するためのスクリプト言語であり、Document Object Model（DOM）は、HTMLやXML文書のためのプログラミングインターフェースを提供するものです。DOMは、文書の構造を表現し、JavaScriptを使用してその構造を変更したり、イベントに対応したりするための手段を提供します。

以下は、JavaScriptとDOMの基本的な概念と操作についての簡単な説明です。

JavaScriptとDOMの基本的な概念
  1. JavaScript:
    • ウェブページ上で動的なコンテンツを作成・変更するためのスクリプト言語。
    • ウェブブラウザ内で直接実行され、ユーザーとの対話やページの挙動を制御するのに使用される。
  2. Document Object Model (DOM):
    • HTMLやXML文書の構造を表現するためのプログラミングインターフェース。
    • 文書内の要素（タグや属性など）はオブジェクトとして扱われ、JavaScriptを使用してこれらのオブジェクトを操作できる。
JavaScriptでDOMを操作する基本的な手法
  1. 要素の取得:
    • document.getElementById('id'): 指定されたID属性を持つ要素を取得。
    • document.getElementsByClassName('class'): 指定されたクラス属性を持つ要素のコレクションを取得。
    • document.getElementsByTagName('tag'): 指定されたタグ名を持つ要素のコレクションを取得。
    • document.querySelector('selector'): 指定されたCSSセレクタに一致する最初の要素を取得。
    • document.querySelectorAll('selector'): 指定されたCSSセレクタに一致するすべての要素を取得。
  2. 要素の操作:
    • テキストの変更: element.textContent = '新しいテキスト';
    • HTMLの変更: element.innerHTML = '<p>新しいHTML</p>';
    • 属性の変更: element.setAttribute('属性名', '新しい値');
  3. イベントの処理:
    • イベントの追加: element.addEventListener('イベント名', 関数);
    • イベントの削除: element.removeEventListener('イベント名', 関数);
  4. 新しい要素の作成と追加: 
    var newElement = document.createElement('タグ名');
newElement.textContent = '新しい要素';
parentElement.appendChild(newElement);

これらは基本的な操作であり、実際のプロジェクトではもっと複雑なDOM操作が必要になるかもしれません。DOMを操作することで、ウェブページの外観や動作を動的に変更し、ユーザーエクスペリエンスを向上させることが可能です。

DOMとCSSセレクター

[編集]

DOM（Document Object Model）とCSSセレクターは、ウェブ開発において密接に関連しています。DOMはHTMLやXML文書の構造を表現するプログラミングインターフェースであり、CSSセレクターはDOM内の要素を選択するためのパターンを指定するための記法です。

DOMとCSSセレクターの関係

[編集]
要素の取得
DOMを使用して、JavaScriptで文書内の要素を取得できます。このとき、取得したい要素を指定するためにCSSセレクターの概念が利用されます。
例
// CSSセレクターを使用して要素を取得
var element = document.querySelector('.exampleClass');
イベントの処理
DOMイベントを処理する際にも、特定の要素を選択するためにCSSセレクターが使用されることがあります。
例
// CSSセレクターを使用してクリックイベントを処理
document.querySelector('.exampleClass').addEventListener('click', function() {
  // クリックされたときの処理
});
スタイルの適用
JavaScriptを使用してDOM要素のスタイルを変更する場合、CSSセレクターのルールに基づいてスタイルが適用されます。
例
// CSSセレクターを使用してスタイルを変更
document.querySelector('.exampleClass').style.color = 'red';
アニメーションやトランジション
CSSアニメーションやトランジションを制御する場合、特定の要素をCSSセレクターを用いて指定します。JavaScriptからもこれらのアニメーションをトリガーすることができます。
例
// CSSセレクターを使用してアニメーションを開始
document.querySelector('.animatedElement').classList.add('animate');

CSSセレクターは、要素を特定するための柔軟で強力な方法を提供します。DOMとCSSセレクターを組み合わせて使用することで、ウェブページの特定の要素に対して効果的に操作やスタイリングを行うことができます。

DOMの操作方法の説明

[編集]

DOMを操作することで、Webページ上の要素を動的に変更できます。ここでは、代表的な3つの操作方法を紹介します。

ノードの追加、削除、置換

[編集]

要素を追加、削除、または置換するには、次のようにDOMのメソッドを使用します。

要素の追加
const parent = document.getElementById('parent-id');
const child = document.createElement('div');
parent.appendChild(child);
要素の削除
const child = document.getElementById('child-id');
child.parentNode.removeChild(child);
要素の置換
const parent = document.getElementById('parent-id');
const newChild = document.createElement('div');
const oldChild = document.getElementById('old-child-id');
parent.replaceChild(newChild, oldChild);

ノードの属性の変更

[編集]

要素の属性を変更するには、次のようにDOMのプロパティを使用します。 

const element = document.getElementById('example-id');
element.setAttribute('src', 'new-image.png');

ノードのスタイルの変更

[編集]

要素のスタイルを変更するには、次のようにDOMのプロパティを使用します。 

const element = document.getElementById('example-id');
element.style.backgroundColor = 'red';

イベントの制御方法の説明

[編集]

Webページ上でのユーザーのアクションやページの状態変化など、様々なイベントが発生します。JavaScriptを使ってこれらのイベントを制御することができます。

イベントの種類

[編集]

代表的なイベントの種類をいくつか紹介します。

  • click：要素がクリックされたときに発生する。
  • mouseover：マウスが要素の上に移動したときに発生する。
  • keydown：キーボードのキーが押されたときに発生する。
  • load：ページや画像などが読み込まれたときに発生する。

addEventListener()メソッド

[編集]

イベントを監視するには、次のようにDOMのメソッドを使用します。 

const element = document.getElementById('example-id');
element.addEventListener('click', function() {
  console.log('clicked!');
});

上記の例では、example-idというIDを持つ要素がクリックされたときに、コンソールにclicked!という文字列が出力されます。

イベントハンドラ関数

[編集]

イベントが発生したときに実行される関数を「イベントハンドラ関数」と呼びます。イベントハンドラ関数は通常、無名関数として定義されます。 

const element = document.getElementById('example-id');
element.addEventListener('click', function() {
  console.log('clicked!');
});

または、以下のように、別の関数を呼び出すこともできます。 

const element = document.getElementById('example-id');

function handleClick() {
  console.log('clicked!');
}

element.addEventListener('click', handleClick);

実践的な例の解説

[編集]

ここでは、実践的な例をいくつか紹介し、JavaScriptでのDOM操作の実践的な活用方法を解説します。

フォームの送信

[編集]

フォームの送信には、submitイベントを利用します。以下は、フォームが送信されたときに、入力された内容を取得する例です。 

<form id="example-form">
  <input type="text" name="name" id="name-input">
  <input type="submit" value="Submit">
</form>

<script>
const form = document.getElementById('example-form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // フォームのデフォルト動作を停止する
  const nameInput = document.getElementById('name-input');
  console.log('name:', nameInput.value);
});
</script>

ボタンのクリックイベントの制御

[編集]

ボタンのクリックイベントを利用して、何らかの処理を行うことができます。以下は、ボタンがクリックされたときに、メッセージを表示する例です。 

<button id="example-button">Click me</button>

<script>
const button = document.getElementById('example-button');
button.addEventListener('click', function() {
  alert('Hello, world!');
});
</script>

マウスオーバーイベントの制御

[編集]

マウスオーバーイベントを利用して、要素の表示や非表示を切り替えることができます。以下は、マウスが要素の上に乗ったときに、別の要素を表示する例です。 

<div id="example-div">
  <p>Hello, world!</p>
  <p id="hidden-text" style="display: none;">You found me!</p>
</div>

<script>
const div = document.getElementById('example-div');
const hiddenText = document.getElementById('hidden-text');

div.addEventListener('mouseover', function() {
  hiddenText.style.display = 'block';
});

div.addEventListener('mouseout', function() {
  hiddenText.style.display = 'none';
});
</script>

ブラウザ間のDOMの違いについて

[編集]

ブラウザ間のDOM（Document Object Model）の違いは、各ブラウザが異なるJavaScriptエンジンや実装を使用していることに起因しています。DOMは、HTMLやXML文書の構造を表現するためのプログラミングインターフェースであり、JavaScriptなどのスクリプト言語から文書の要素にアクセスし、それらを変更するために使用されます。

各主要ブラウザ（Google Chrome、Mozilla Firefox、Microsoft Edge、Safari）は、それぞれ独自の特徴や実装を持っており、これがブラウザ間でのDOMの微妙な違いをもたらしています。以下に、その主な違いをいくつか挙げてみますが、これは一般的な傾向であり、バージョンや実装によって変化する可能性があります。

DOMの拡張機能や非標準のメソッド・プロパティ
各ブラウザは独自の拡張機能や非標準のメソッド・プロパティを持っていることがあります。これは、特定のブラウザ向けにコードを書く際に留意する必要があります。例えば、Microsoft Edgeが導入する新しいDOMメソッドなどがこれに該当します。
イベントハンドリング
イベントハンドリングの仕組みやイベントオブジェクトの構造がブラウザごとに異なることがあります。例えば、イベントの伝播（イベントバブリングやイベントキャプチャリング）の動作が微妙に異なります。開発者はこれを考慮してクロスブラウザ対応のコードを書く必要があります。
CSSスタイルの計算
ブラウザはCSSスタイルを計算する方法に違いがあります。JavaScriptからスタイル情報を取得したり、変更したりする際に、ブラウザごとの差異に注意する必要があります。
非同期処理の動作
JavaScriptの非同期処理に関する動作もブラウザによって異なることがあります。例えば、タイマーの挙動や非同期イベントの処理順序がブラウザごとに微妙に異なります。
セキュリティ制約
セキュリティ上の理由から、各ブラウザは異なるポリシーを採用しています。同一オリジンポリシーやクロスドメインリクエストに関連するセキュリティ制約がブラウザごとに異なります。

開発者は、クロスブラウザ対応を考慮してコーディングする際に、ライブラリやフレームワーク（例: jQuery、React.js、Angular）の利用や、ポリフィル（polyfill）の導入を検討することがあります。これにより、異なるブラウザで一貫性のある動作を確保することができます。

よく使われるライブラリの紹介

[編集]
JavaScriptには多くのライブラリがあり、その中でもjQueryやReact.jsがよく使われています。

jQueryの概要と使用方法

[編集]

jQueryは、JavaScriptを簡単に扱えるようにするライブラリです。HTMLドキュメント内の要素を選択し、イベントを追加したり、要素のスタイルを変更したりすることができます。

以下は、jQueryを使用した単純な例です。 

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Example</title>
	<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
	<button id="btn">Click me!</button>
	<script>
		$(document).ready(function() {
			$("#btn").click(function() {
				alert("Hello, World!");
			});
		});
	</script>
</body>
</html>

この例では、jQueryの $ 関数を使用して document オブジェクトを選択し、ready メソッドを使用してページが読み込まれた後にコードを実行するように指定しています。そして、click メソッドを使用して btn 要素にクリックイベントを追加し、alert メソッドを使用して「Hello, World!」というメッセージを表示しています。

React.jsの概要と使用方法

[編集]

React.jsは、Facebook（現Meta）によって開発されたJavaScriptフレームワークで、ユーザーインターフェースの作成に特化しています。React.jsは、仮想DOMを使用してパフォーマンスを最適化し、コンポーネントベースの開発に適しています。

以下は、Reactを使用した単純な例です。 

<!DOCTYPE html>
<html>
  <head>
    <title>React Example</title>
    <!-- React library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <!-- Babel -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.10/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
        const App = () => <h1>Hello, World!</h1>;

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</html>

このHTMLファイルは、Reactを使用して単純な "Hello, World!" メッセージを表示する例です。以下は各部分の解説です。

  1. <head> セクション：
    • <title>：ページのタイトルを指定します。
    • CDNからReactとReactDOMを使用します。
  2. <body> セクション：
    • Reactアプリケーションがレンダリングされる <div id="root"></div> を含みます。
    • <script> タグ内にReactコンポーネントが定義されています。
    • <script> タグの type 属性が text/babel に設定されており、これによりブラウザがJavaScriptとして解釈する前にBabelによる変換が行われます。
    • App() 関数はReactコンポーネントを定義しています。この場合、単純なh1タグが返されます。
    • ReactDOM.render() メソッドは、指定されたReact要素を指定されたDOMノードにレンダリングします。ここでは、<App /> を #root ノードにレンダリングしています。

このように、ReactとBabelを使用することで、単一のHTMLファイル内でReactアプリケーションを構築し、ブラウザで実行することができます。

よく使われるツールの紹介

[編集]

Web開発でDOMを扱う際に、ブラウザの開発者ツールが非常に役立ちます。代表的なブラウザの開発者ツールとして、Chrome DevToolsとFirefox Developer Editionがあります。 これらのツールは、DOMの構造やスタイル、イベントの発生などをリアルタイムに確認することができます。

Chrome DevToolsのDOMパネルの解説

[編集]

Chrome DevToolsのDOMパネルは、開発者がWebページのDOM（Document Object Model）を効果的に視覚化し、デバッグや編集を行うための強力なツールです。このパネルはChromeブラウザのデベロッパーツールセットの一部であり、ページの要素や構造をリアルタイムで探索するのに役立ちます。以下に、DOMパネルの主な機能について解説します。

DOMパネルの基本機能:

ツリー形式のDOM表示
DOMパネルは、ページのDOM構造をツリー形式で表示します。各要素はノードとして表現され、階層構造を視覚的に把握できます。このツリーを展開・折りたたみすることで、特定の要素に簡単に移動できます。
属性やスタイルの編集
ページ上の任意のDOMノードを選択すると、右側にそのノードの詳細情報が表示されます。ここで、ノードの属性やスタイルを直接編集できます。変更が即座に反映され、デザインや構造の調整が容易です。
イベントのリッスンとデバッグ
選択した要素に対して、特定のイベントがどのようにリッスンされているかを確認できます。これにより、イベントの発生やデバッグが効果的に行えます。また、特定のイベントを手動でトリガーすることも可能です。
コンソールとの統合
DOMパネルはコンソールと統合されており、JavaScriptコードを実行したり、DOMノードを検索したりすることができます。コンソールに簡単なスクリプトを入力することで、動的な変更やデバッグが行えます。
パネルの開き方

Chrome DevToolsのDOMパネルはいくつかの方法で開くことができます。最も一般的な方法は、キーボードショートカットである「F12」キーを押すことです。また、ウェブページ上で右クリックして「検証」を選択し、DevToolsを開いた後、上部のメニューバーから「Elements」（または「要素」）タブをクリックすることでもアクセスできます。 C hrome DevToolsのDOMパネルは、Web開発者がページの構造を探索し、リアルタイムで変更を加えるための使いやすいツールとなっています。これにより、効率的なデバッグや開発作業が可能になります。

Firefox Developer EditionのDOMインスペクタ

[編集]

Firefox Developer EditionのDOMインスペクタは、Web開発者に向けて設計されたツールの一環として、ページのDOM構造を詳細に調査し、編集するための強力な機能を提供しています。以下に、Firefox Developer EditionのDOMインスペクタの主な機能と使用方法について解説します。

DOMインスペクタの基本機能
ツリー形式のDOM表示
DOMインスペクタは、ページのDOM構造をツリー形式でわかりやすく表示します。各ノードは階層的に配置され、展開・折りたたみを行うことで特定の要素に素早く移動できます。
属性やスタイルの編集
選択したDOMノードに対して、右側のパネルでそのノードの属性やスタイルを編集できます。即座に変更が反映され、開発者はデザインや構造を柔軟に調整することが可能です。
イベントのリッスンとデバッグ
デベロッパーツール内で特定のDOM要素を選択すると、その要素に関連するイベントのリッスンやデバッグが行えます。これにより、イベントの発生状況を把握し、デバッグ作業を効果的に進めることができます。
検索とフィルタリング
ページ内の特定のDOMノードを素早く検索するための検索機能が備わっています。また、特定のノードのみを表示するためのフィルタリングも可能で、大規模なDOM構造の中で目的の要素を見つけやすくなります。
パネルの開き方

Firefox Developer EditionのDOMインスペクタは、いくつかの方法で開くことができます。最も一般的な方法は、キーボードショートカットである「F12」キーを押すことです。また、ウェブページ上で右クリックして「検証」を選択し、DevToolsを開いた後、上部のメニューバーから「Inspector」（または「検証」）タブをクリックすることでもアクセスできます。

Firefox Developer Editionは、豊富な開発者向け機能と高いパフォーマンスを提供し、Web開発者が効果的に作業を行える環境を提供しています。その中でもDOMインスペクタは、ページの構造や要素の編集において優れたサポートを提供しています。

DOM以外のドキュメントモデル

[編集]

DOM以外のドキュメントモデルには、さまざまなアプローチやライブラリが存在します。以下に、いくつか代表的なものを紹介します。

  1. SAX (Simple API for XML):
    概要
    SAXはXML文書を一行ずつ読み込んで解析し、要素を一つずつ処理するイベント駆動の手法です。
    特徴
    メモリの使用量が少なく高速に処理できるため、大規模なXML文書に向いている。
    階層的な情報を保持せず、要素の親子関係などを追跡しない。
  2. JDOM (Java Document Object Model):
    概要
    JDOMはJavaでXML文書を扱うためのDOMライブラリで、DOMよりもシンプルなAPIを提供しています。
    特徴
    JavaのオブジェクトとしてXML要素を扱うことができ、扱いやすい。
    XML文書の作成や編集が容易であり、開発者にとって使い勝手が良い。
  3. LINQ to XML (Language Integrated Query to XML):
    概要
    LINQ to XMLは.NET Frameworkの一部であり、XML文書を扱うためのAPIを提供しています。
    特徴
    XMLをクエリ言語のように扱えるため、直感的で強力なクエリを実現できる。
    XML文書を.NETオブジェクトとして取り扱うことができ、.NETプログラム内で簡単に統合できる。
  4. JsonML (JSON Markup Language):
    概要
    JsonMLはJSON形式でXML文書を表現する手法で、データをJavaScriptのオブジェクトとして扱います。
    特徴
    JSON形式でXML文書を記述でき、JavaScriptとの統合が容易。
    ドキュメントツリーを持たず、SAXと同様に要素の階層関係を保持しない。

これらのドキュメントモデルは、それぞれの特長により異なる用途に適しています。開発者は、プロジェクトの要件や好みに基づいて、最適なモデルやライブラリを選択することが重要です。

附録

[編集]

チートシート

[編集]
// ページ全体の読み込みが完了した時に実行される関数
window.addEventListener('load', function() {

  // 要素を取得する方法
  
  // IDを指定して要素を取得する
  const elementById = document.getElementById('element-id');
  
  // セレクタを使って要素を取得する
  const elementBySelector = document.querySelector('.element-class');
  
  // セレクタを使って複数の要素を取得する
  const elementsBySelectorAll = document.querySelectorAll('.element-class');
  
  // タグ名を使って要素を取得する
  const elementByTagName = document.getElementsByTagName('div');
  
  // クラス名を使って要素を取得する
  const elementsByClassName = document.getElementsByClassName('element-class');
  
  // 要素の属性を取得・変更する方法
  
  // 属性の値を取得する
  const attributeValue = elementById.getAttribute('data-attribute');
  
  // 属性の値を変更する
  elementById.setAttribute('data-attribute', 'new-value');
  
  // 要素のテキストを取得・変更する方法
  
  // 要素のテキストを取得する
  const elementText = elementById.textContent;
  
  // 要素のテキストを変更する
  elementById.textContent = 'new-text';
  
  // 要素のスタイルを変更する方法
  
  // スタイルプロパティを変更する
  elementById.style.backgroundColor = 'red';
  
  // 要素のクラスを変更する
  elementById.classList.add('new-class');
  elementById.classList.remove('old-class');
  
  // 要素を作成・追加する方法
  
  // 新しい要素を作成する
  const newElement = document.createElement('div');
  
  // 要素を追加する
  elementById.appendChild(newElement);
  
  // 要素を削除する
  elementById.removeChild(newElement);
  
  // イベントリスナーを追加する方法
  
  // クリックイベントを追加する
  elementById.addEventListener('click', function() {
    // クリックされた時に実行される処理
  });
  
});

用語集

[編集]
  1. DOM (Document Object Model): HTMLやXMLドキュメントを表すためのオブジェクトの階層的な構造。JavaScriptを用いて、ドキュメント内の要素にアクセスや操作をすることができる。
  2. ノード (Node): DOMの要素であり、HTML要素、テキスト要素、コメントなどが含まれる。親子関係や兄弟関係などを持ち、階層的に構成される。
  3. 要素 (Element): HTML文書におけるタグに対応するDOMのノード。タグの種類に応じた属性を持つことができる。
  4. 属性 (Attribute): 要素に付加された情報であり、要素の属性として定義される。id、class、srcなどがある。
  5. CSSセレクタ (CSS Selector): CSSで用いられる要素を指定するための記述方法。要素名、クラス名、IDなどを用いて要素を指定することができる。
  6. コレクション (Collection): 複数の要素を持つオブジェクト。HTMLCollectionやNodeListなどがある。
  7. innerHTML: 要素内のHTMLを表すプロパティ。テキストやHTMLタグなどを含む。
  8. textContent: 要素内のテキストを表すプロパティ。HTMLタグを含まない。
  9. スタイルプロパティ (Style Property): CSSで定義されたスタイルを要素に適用するためのプロパティ。backgroundColor、colorなどがある。

脚註

[編集]


外部リンク

[編集]
"https://ja.wikibooks.org/w/index.php?title=JavaScript/DOM&oldid=242975" より作成