JavaScript - DOM Document: A Beginner's Guide

こんにちは、未来のプログラマーたち！今日は、JavaScriptとDocument Object Model（DOM）の世界に興味深く飛び込みます。これらの用語が少し脅威のように聞こえるかもしれませんが、このチュートリアルの終わりまでに、プロのようにウェブページを操作できるようになるでしょう！

JavaScript - DOM Document

HTML DOM Documentとは何か？

家を建てることを考えてみてください。その家の設計図はあなたのHTMLドキュメントであり、ブラウザで見える実際の家がそれに相当します。では、家が建てられた後で壁の色を変えたり、新しい窓を追加したりしたい場合どうしますか？それがDOMの役場です！

HTML DOM（Document Object Model）はHTMLドキュメントのためのプログラミングインターフェースです。ドキュメントの構造を木のような階層で表現し、各ノードはドキュメントの一部を表すオブジェクトです。

この木の根はdocumentオブジェクトです。これは私たちの家の基盤であり、他すべてはその上に築かれています。

簡単な例から始めましょう：

<!DOCTYPE html>
<html>
<head>
<title>私の最初のDOMページ</title>
</head>
<body>
<h1>DOMへようこそ！</h1>
<p>これはパラグラフです。</p>
</body>
</html>

このHTML構造では、documentが最上位にあり、次にhtml、head、bodyなどが続きます。

DOMが何であるかを理解したので、アクセス方法を学びましょう。JavaScriptでは、documentキーワードを使って簡単にドキュメントオブジェクトにアクセスできます。

以下は簡単な例です：

console.log(document);

これをブラウザのコンソールで実行すると、全文のドキュメントオブジェクトが見えます。まるで家の全体を鳥瞰するようなものです！

ドキュメントオブジェクトには、HTMLドキュメントのさまざまな部分にアクセスするための多くのプロパティがあります。それらのいくつかを見てみましょう：

childElementCountプロパティは、要素が持つ子要素の数を返します。ドキュメントオブジェクトの場合、<html>要素の直接の子要素の数を返します。

console.log(document.childElementCount);

これは通常1を返します。なぜなら、<html>要素は通常1つの直接の子要素、すなわち<body>要素しか持たないからです。

linksプロパティは、ドキュメント内のすべての<a>および<area>要素（href属性を持つもの）のコレクションを返します。

console.log(document.links);

これは、「私の家にはどれだけのドア（リンク）があるか？」と尋ねるようなものです。

titleプロパティは、現在のドキュメントのタイトルを取得または設定します。

console.log(document.title);
document.title = "私の新しいタイトル";

これは、家の名札を変更するようなものです！

実際の例で知識を活かしてみましょう：

document.title = "Welcome to " + document.title;
console.log("新しいタイトルは: " + document.title);

このスクリプトは、現在のページタイトルの前に「Welcome to ”を追加します。家の名札に友好的な挨拶を加えるようなものです！

let linkCount = document.links.length;
console.log("このページには " + linkCount + " 個のリンクがあります。");

このスクリプトは、ページ上のリンクの数を数えます。家を離れる方法の数を数えるようなものです！

let newHeading = document.createElement("h2");
newHeading.textContent = "この見出しはJavaScriptで追加されました！";
document.body.appendChild(newHeading);

このスクリプトは、新しい<h2>要素を作成し、テキストコンテンツを設定し、<body>の最後に追加します。JavaScriptで新しい部屋を家に追加するようなものです！

以下は、いくつかの一般的なDOMドキュメントメソッドの表です：

メソッド	説明
`document.getElementById(id)`	指定されたIDを持つ要素を返します
`document.getElementsByClassName(name)`	指定されたクラス名を持つ要素のコレクションを返します
`document.getElementsByTagName(name)`	指定されたタグ名を持つ要素のコレクションを返します
`document.createElement(name)`	エレメントノードを作成します
`document.createTextNode(text)`	テキストノードを作成します
`document.querySelector(selector)`	CSSセレクタに一致する最初の要素を返します
`document.querySelectorAll(selector)`	CSSセレクタに一致するすべての要素を返します

おめでとうございます！JavaScriptを使ったDOM操作の世界に初めての一歩を踏み出しました。DOMは、動的でインタラクティブなウェブページを構築するためのツールキットです。まるで魔法の杖を持って、ウェブページの任意の部分を自由に変更できるようなものです！

あなたが旅を続ける中で、DOMを使ったさらに興味深い方法を発見するでしょう。練習を続け、好奇心を持ち、実験を恐れずに。すぐに、あなたのJavaScriptの旋律に踊るウェブページを構築できるようになるでしょう！

未来のウェブ魔法使いたち、ハッピーコーディングを！

Credits: Image by storyset