JavaScript - DOM Navigation

こんにちは、未来のJavaScriptの魔法使いの皆さん！? DOM navigationの不思議な世界への興味深い旅に準備はできましたか？あなたの近所の親切なコンピュータサイエンスの先生として、この冒険を案内するのをとても楽しみにしています。では、仮想の羅針盤を手に取り、探索を始めましょう！

DOM Nodesとは？

DOM（Document Object Model）をウェブページの家系図として考えましょう。この木の各要素はノードと呼ばれます。実際の家族と同様に、これらのノードは互いに関係しています。親、子、兄弟姉妹です。すごいですね？

簡単な例を見てみましょう：

<html>
<head>
<title>私の素晴らしいページ</title>
</head>
<body>
<h1>ようこそ！</h1>
<p>これはパラグラフです。</p>
</body>
</html>

この「家族」では、<html>要素は曾祖父母で、<head>と<body>はその子孫であり、それ以降も同様です。これらの要素はすべてDOM木のノードです。

HTML DOM Nodesの関係

ノードが何であるかを理解したので、その関係について探ってみましょう。私たちのDOM家系図では：

親ノードには子があります
子ノードには親があります
兄弟姉妹は同じ親を持つノードです

前のHTMLでの例では：

<html>は<head>と<body>の親です
<head>と<body>は兄弟姉妹です
<h1>と<p>は<body>の子です

JavaScriptを使ったノード間の移動

探索者帽子をかぶりましょう！? JavaScriptはノード間を移動するための便利なツールを提供してくれます。では、潜り込んでみましょう！

第一子要素のアクセス

要素の第一子を取得するには、firstElementChildプロパティを使用します。以下のようになります：

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // 出力: H1

この例では、<body>タグの第一子を取得しており、それは<h1>要素です。

最後の子要素のアクセス

同様に、最後の子を取得するにはlastElementChildを使用します：

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // 出力: P

ここでは、<body>の最後の子を取得しており、それは<p>要素です。

全ての子要素のアクセス

全ての子要素を見たい場合はchildrenを使用します：

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
console.log(child.tagName);
}
// 出力:
// H1
// P

このコードは<body>の全ての子要素をループで回り、タグ名をログします。

親ノードのアクセス

ノードの親を見つけるにはparentNodeを使用します：

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // 出力: BODY

ここでは、<h1>要素の親を取得しており、それは<body>です。

次の兄弟ノードのアクセス

次の兄弟を見つけるにはnextElementSiblingを使用します：

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // 出力: P

このコードは<h1>の次の兄弟を取得しており、それは<p>要素です。

前の兄弟ノードのアクセス

前の兄弟を見つけるにはpreviousElementSiblingを使用します：

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // 出力: H1

ここでは、<p>の前の兄弟を取得しており、それは<h1>です。

DOMの根ノード

どの家系図にもその根があり、DOMでは主に3つあります：

document.documentElement - ルート要素（通常は<html>）
document.head - <head>要素
document.body - <body>要素

console.log(document.documentElement.tagName); // 出力: HTML
console.log(document.head.tagName); // 出力: HEAD
console.log(document.body.tagName); // 出力: BODY

DOMのnodeNameプロパティ

各ノードには名前があり、それをnodeNameプロパティでアクセスできます：

let heading = document.querySelector('h1');
console.log(heading.nodeName); // 出力: H1

DOMのnodeValueプロパティ

nodeValueプロパティはノードの値を取得します。テキストノードの場合、それはテキストコンテンツです：

let heading = document.querySelector('h1');
let textNode = heading.firstChild;
console.log(textNode.nodeValue); // 出力: ようこそ！

DOMのノードの種類

全てのノードは平等ではありません！DOMには異なる種類のノードがあります。以下は主なものです：

ノードの種類	説明	nodeTypeの値
Element Node	任意のHTML要素（例：`<p>`、`<div>`など）	1
Attribute Node	HTML要素の属性	2
Text Node	HTML要素内のテキスト	3
Comment Node	HTMLのコメント	8
Document Node	全文書	9

DOMのnodeTypeプロパティ

nodeTypeプロパティを使うと、どの種類のノードかを判断できます：

let element = document.querySelector('h1');
let textNode = element.firstChild;
let commentNode = document.createComment('This is a comment');

console.log(element.nodeType); // 出力: 1 (Element Node)
console.log(textNode.nodeType); // 出力: 3 (Text Node)
console.log(commentNode.nodeType); // 出力: 8 (Comment Node)

そして、皆さん！あなたはプロのようにDOMをナビゲートしました。実践は完璧にするためのものですので、これらの概念を試してみてください。間もなく、 squirrel in a nut factory よりも速くDOM木を traversal するようになるでしょう！?️

ハッピーコーディング、そしてDOMがあなたと共にあります！?

Credits: Image by storyset

前のチュートリアル:

JavaScript - DOMアニメーション

次のチュートリアル:

JavaScript - DOMコレクション