1.1 DOMの基本コンセプト
Document Object Model (DOM) はウェブドキュメント用のプログラムインターフェースだよ。ドキュメントの構造をノードツリーとして表し、各ノードは要素、テキスト、コメントなどのドキュメントの一部を表してる。DOMとそのノードを理解することは、ウェブ技術を扱う上で超基本的な部分なんだ。
DOMの基本コンセプト
DOMって何？
DOM (Document Object Model) はHTMLドキュメントの内容を階層構造で記述するものなんだ。それを使ってプログラムやスクリプトでドキュメントの内容に動的にアクセスしたり、構造やスタイル、内容を変更したりできるってわけ。
ノードと要素
DOMの文脈では、ドキュメントのすべての部分が「ノード」として扱われるんだ。ノードには以下のいくつかのタイプがあるよ：
- 要素ノード: HTMLタグを表す。
- テキストノード: 要素ノード内のテキストを表す。
- コメントノード: HTML内のコメントを表す。
- ドキュメントノード: ドキュメントそのものを表す。
ノードツリー
DOMは木構造（ツリー）として表され、すべてのノードが子（子ノード）を持つことができる。ルートノードはdocumentオブジェクトで、HTMLドキュメント全体を表しているんだ。
DOM構造の例:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
このドキュメントのDOMツリーは以下のようになるよ：
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 ノードの種類
1. 要素ノード
要素ノードはHTMLタグに対応してるよ。例えば、<body>タグは要素ノードとして扱われる。
例:
この例では、<body>と<h1>が要素ノードだよ。
<body>
<h1>Hello, World!</h1>
</body>
2. テキストノード
テキストノードは、要素ノード内に含まれているテキストのことだよ。テキストノードは要素ノードの子ノードとして存在してる。
例:
この例では、"Hello, World!"というテキストが<h1>ノードの子であるテキストノードだよ。
<h1>Hello, World!</h1>
3. コメントノード
コメントノードはHTML内のコメント部分を表してるよ。<!--で始まり、-->で終わる。
例:
この例では、<!-- This is a comment -->がコメントノードになってる。
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. ドキュメントノード
ドキュメントノードはDOMツリーのルートノードであり、ドキュメント内の他のすべてのノードの親ノードだよ。
例:
JavaScriptのdocumentオブジェクトがドキュメントノードに該当するよ：
console.log(document);
1.3 DOMノードとのやり取り
1. ノードの情報を取得する
ノードオブジェクトのプロパティを使えば特定のノードに関する情報を取得できるよ。例えば、ノードのタイプや名前、内容を知ることができる。
例:
<html>
<head>
<title>私のウェブサイト</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // 出力: H1
console.log(heading.nodeType); // 出力: 1 (要素ノード)
console.log(heading.textContent); // 出力: "こんにちは、世界！"
2. ノードの内容を変更する
ノードの内容はDOMのプロパティやメソッドを使って変更できるよ。
例:
const paragraph = document.querySelector('p');
paragraph.textContent = '更新されたテキスト内容';
3. 子ノードを扱う
DOMの各ノードは子ノードを持つことがあり、それらにアクセスして操作することができるんだ。
例:
<html>
<head>
<title>私のウェブサイト</title>
</head>
<body>
<ul>
<li>会社概要</li>
<li>採用情報</li>
<li>お問い合わせ</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // リストの最初のアイテムのテキストを出力
console.log(lastItem.textContent); // リストの最後のアイテムのテキストを出力
1.4 便利なプロパティ
1. プロパティ nodeName と nodeType
nodeName: ノードの名前を返すnodeType: ノードのタイプを返す (例えば、要素ノードは1、テキストノードは3)
例:
<html>
<head>
<title>私のウェブサイト</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // 出力: H1
console.log(element.nodeType); // 出力: 1
2. プロパティ textContent と innerHTML
textContent: ノードのテキスト内容を取得または設定できるinnerHTML: ノードのHTML内容を取得または設定できる
例:
<html>
<head>
<title>私のウェブサイト</title>
</head>
<body>
<p>本当に <b>面白い</b> そして <b>役立つ</b> 段落！</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // 段落のテキスト内容を出力
console.log(element.innerHTML); // 段落のHTML内容を出力
3. プロパティ parentNode, childNodes, firstChild と lastChild
parentNode: 親ノードを返すchildNodes: 全ての子ノードを含むコレクションを返すfirstChild: 最初の子ノードを返すlastChild: 最後の子ノードを返す
例:
<html>
<head>
<title>私のウェブサイト</title>
</head>
<body>
<ul>
<li>会社概要</li>
<li>採用情報</li>
<li>お問い合わせ</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // 親ノードを出力
console.log(element.childNodes); // 子ノードのコレクションを出力
console.log(element.firstChild); // 最初の子ノードを出力
console.log(element.lastChild); // 最後の子ノードを出力
GO TO FULL VERSION