2.1 要素へのアクセス方法
DOM (Document Object Model) のナビゲーションは、ウェブドキュメントを扱うときに重要なタスクだね。JavaScriptは、ドキュメントの要素を探してアクセスするための多くのメソッドを提供してるよ。これらのメソッドは、開発者が簡単に必要な要素を見つけて操作するのを手助けするんだ。
1. メソッド getElementById()
getElementById() メソッドは、指定された id 属性を持つ要素を返すよ。これは最も簡単でよく使われるメソッドの1つだね。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">This is the content</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // 出力: This is the content
</script>
</body>
</html>
2. メソッド getElementsByClassName()
getElementsByClassName() メソッドは、指定されたクラスを持つすべての要素のコレクションを返すよ。このコレクションは「ライブ」で、DOMが変更されると自動的に更新されるんだ。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // 出力: 3
</script>
</body>
</html>
3. メソッド getElementsByTagName()
getElementsByTagName() メソッドは、指定されたタグを持つすべての要素のコレクションを返すよ。このコレクションもまた「ライブ」なんだ。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // 出力: 3
</script>
</body>
</html>
4. メソッド querySelector()
querySelector() メソッドは、指定されたCSSセレクタに一致する最初の要素を返すよ。これは要素を検索するための非常に強力で柔軟なメソッドなんだ。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // 出力: Paragraph 2
</script>
</body>
</html>
5. メソッド querySelectorAll()
querySelectorAll() メソッドは、指定されたCSSセレクタに一致するすべての要素の静的（変更されない）コレクションを返すよ。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // 出力: 3
</script>
</body>
</html>
2.2 ノードのナビゲーション
DOMは、現在の要素に対してノードをナビゲートするためのメソッドも提供してるよ。
1. プロパティ parentNode
プロパティ parentNode は、現在のノードの親ノードを返すよ。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paragraph</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // 出力: container
</script>
</body>
</html>
2. プロパティ childNodes
プロパティ childNodes は、現在のノードのすべての子ノードを含むコレクションを返すよ、テキストノードも含めてね。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // 子ノードのすべての数を出力、テキストノードも含む
</script>
</body>
</html>
なぜ結果が7なのか不思議に思うかもしれないね。
さっきも言ったように、childNodes プロパティは現在のノードのすべての子ノードを含むコレクションを返すよ、テキストノード（スペースや文字、改行など）も含めてね。HTMLマークアップは、<li> の間にスペースや改行があるから、それらも個別のノードとしてカウントされるんだ。
上の例では、<ul> タグと最初の <li> の間に改行（そして恐らくスペース）があるよね、これがテキストノードとしてカウントされる。そして同じことがすべての <li> の間で、そして最後の <li> の後も発生するんだ。だから、3つのリスト要素の代わりに、childNodes はこれらのテキストノードも含め、合計7つになるんだ。
要素だけを取得したい場合（テキストノードを無視して）、children プロパティを使うといいよ、これが子要素だけを返してくれる:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. プロパティ firstChild と lastChild
firstChild と lastChild のプロパティは、それぞれ最初と最後の子ノードを返すよ。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
コンソールに何も表示されないことに驚くかもね。でもそうじゃないんだ。最後の子ノード Item 1 と Item 3（新しい行）が表示されるんだ。この点で引っかかったら、2. プロパティ childNodesをもう一回読んでみてね。
4. プロパティ nextSibling と previousSibling
nextSibling と previousSibling のプロパティは、同じ階層の次と前のノードを返すよ。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // 出力: Item 3
console.log(prev.textContent); // 出力: Item 1（テキストノードを飛ばした場合）
</script>
</body>
</html>
2.3 要素ノードのナビゲーション
5. プロパティ nextElementSibling と previousElementSibling
これらのプロパティは、次と前の要素ノードを返すよ（テキストとコメントを飛ばして）。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // 出力: Item 3
console.log(prev.textContent); // 出力: Item 1
</script>
</body>
</html>
6. プロパティ firstElementChild と lastElementChild
これらのプロパティは、最初と最後の子要素ノードを返すよ（テキストとコメントを飛ばして）。
例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // 出力: Item 1
console.log(last.textContent); // 出力: Item 3
</script>
</body>
</html>
GO TO FULL VERSION