#DOM の概要
DOM
DOMとはJavaScriptがWebページを操作するためのインターフェースであり、正式名称は「Document Object Model」です。その機能は、Web ページを JavaScript オブジェクトに変換し、スクリプトを使用してさまざまな操作 (コンテンツの追加や削除など) を実行できるようにすることです。
ブラウザは、構造化ドキュメント (HTML や XML など) を DOM モデルに基づいて一連のノードに解析し、これらのノードがツリー構造 (DOM ツリー) を形成します。すべてのノードと最終的なツリー構造には、標準化された外部インターフェイスがあります。
DOM は、さまざまな言語で実装できる単なるインターフェイス仕様です。したがって、厳密に言えば、DOM は JavaScript 構文の一部ではありませんが、DOM 操作は JavaScript の最も一般的なタスクです。DOM がなければ、JavaScript は Web ページを制御できません。一方、JavaScript は DOM 操作に最もよく使用される言語でもあります。後で紹介するのは、JavaScript の実装と DOM 標準の使用法です。
ノード
DOMの最小構成単位をノードと呼びます。ドキュメントのツリー構造（DOMツリー）は、さまざまな種類のノードから構成されます。各ノードはドキュメント ツリーの葉として見ることができます。
ノードには 7 種類あります。
Document: ドキュメント ツリー全体の最上位ノードDocumentType:doctypeタグ (<!DOCTYPE html>など)Element: Web ページのさまざまな HTML タグ (<body>、<a>など)Attr: Web ページ要素の属性 (class="right"など)Text: タグ間のテキスト、またはタグに含まれるテキストコメント: コメントDocumentFragment: ドキュメントのフラグメント
ブラウザは、ネイティブ ノード オブジェクト「Node」を提供します。上記の 7 種類のノードはすべて「Node」を継承するため、いくつかの共通のプロパティとメソッドを持ちます。
ノードツリー
ドキュメントのすべてのノードは、レベルに応じてツリー構造に抽象化できます。このツリー構造が DOM ツリーです。最上位ノードがあり、その次のレベルが最上位ノードの子ノードであり、さらにその子ノードが独自の子ノードを持つというように、ツリーのように階層ごとにピラミッド構造が導出されます。 。
ブラウザーは、ドキュメント全体を表す「ドキュメント」ノードをネイティブに提供します。
書類
// ドキュメントツリー全体
ドキュメントの最初の層には 2 つのノードがあり、1 つ目はドキュメント タイプ ノード (<!doctype html>)、2 つ目は HTML Web ページのトップレベル コンテナ タグ <html> です。後者はツリー構造のルート ノードを構成し、他の HTML タグ ノードはその下位ノードになります。
ルート ノードを除く他のノードには 3 つの階層関係があります。
・親ノード関係(parentNode)：直属の上位ノード ・子ノード関係(childNodes)：直属のノード ・兄弟ノード関係(sibling)：同じ親ノードを持つノード
DOM は、これら 3 つの関係のノードを取得するための操作インターフェイスを提供します。たとえば、子ノード インターフェイスには firstChild (最初の子ノード) および lastChild (最後の子ノード) などの属性が含まれ、兄弟ノード インターフェイスには nextSibling (すぐ後の兄弟ノード) および previousSibling が含まれます。 ` (直前の兄弟ノード) 属性。
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0