ホームページ  >  記事  >  ウェブフロントエンド  >  ドキュメントオブジェクトモデルDOM よくある解説_基礎知識

ドキュメントオブジェクトモデルDOM よくある解説_基礎知識

WBOY
WBOYオリジナル
2016-05-16 17:17:531139ブラウズ

始める前に言っておきますが、DOM は非常に理解しやすいですが、皆さんが言っていることが公式すぎるため、非常に簡単な言葉に翻訳してみましょう。 DOM についての理解を深め、包括的に理解します。

DOM とは

DOM の正式名は Document Object Model です。これは、スクリプトが Web ページ、ウィンドウ、ドキュメントを制御できるようにするドキュメント オブジェクト モデルです。

DOM がなければ、JavaScript は別のスクリプト言語になりますが、DOM があれば、JavaScript は動的なページを作成するための強力なツールになります。 DOM は JavaScript 言語の一部ではなく、ブラウザーに組み込まれたアプリケーション プログラミング インターフェイスです。もちろん、単純に HTML および XML ドキュメントのプログラミング インターフェイスとして理解することもできます。これは文書の構造化された表現を提供し、文書の内容と表現を変更することができます。

DOM (Document Object Model) は、スクリプトが構造化ドキュメントとやり取りし、アクセスする方法を記述するために使用される一連の Web 標準です。その機能は、ブラウザでサポートされているドキュメント (HTML XML XHTML を含む) をオブジェクトとして解析することです。 DOM は実際には、ドキュメントに含まれるコンテンツを操作するためのプログラミング API であり、開発者がドキュメントのデータを読み取り、検索、変更、追加、削除できるようにします。 DOM はプラットフォームや言語に依存しません。つまり、DOM をサポートするプラットフォームとプログラミング言語である限り、DOM を使用してドキュメントを作成できます。

DOM は、ドキュメント内のコンテンツ、構造、スタイル、動作にアクセス、操作、作成するための一連のオブジェクト、メソッド、プロパティを定義します。 Web ページの各要素 (HTML タグ) はオブジェクト (オブジェクト、いわゆる「オブジェクト」とは、口語的には「物」を意味します) に対応します。 Web ページ上のタグは層ごとに入れ子になっており、最も外側の層は です。ドキュメント オブジェクト モデルも層ごとに入れ子になっていますが、通常はツリーの形状として理解されます。ツリーのルートはウィンドウまたはドキュメント オブジェクトであり、最も外側のラベルの周囲、つまりドキュメント全体に相当します。ツリーのルート (通常、ツリーは遺伝的家系図や家系図のように逆さまに描かれます。ルートが唯一の共通の祖先です) の下にはサブレベル オブジェクトがあり、これらのオブジェクトには、ルート オブジェクトを除き、すべてのオブジェクトには独自の親オブジェクトがあり、同じオブジェクトの子オブジェクト間の関係は兄弟関係です。家系図を見たことがない場合は、会社の組織構造を知っておく必要があります。
ドキュメントオブジェクトモデルDOM よくある解説_基礎知識
DOM は、実際にはオブジェクト指向の方法で記述されたドキュメント モデルです。 DOM は、ドキュメントを表現および変更するために必要なオブジェクト、これらのオブジェクトの動作とプロパティ、およびこれらのオブジェクト間の関係を定義します。 DOM は、ページ上のデータと構造のツリー表現として考えることができますが、もちろん、ページはそのようなツリーの形式で実装されない場合があります。 JavaScript を使用すると、HTML ドキュメント全体を再構築できます。ページ上の項目は、追加、削除、変更、または並べ替えることができます。

ページ上の何かを変更するには、JavaScript が HTML ドキュメント内のすべての要素にアクセスする必要があります。このエントリは、HTML 要素を追加、移動、変更、または削除するためのメソッドおよびプロパティとともに、ドキュメント オブジェクト モデル (DOM) を通じて取得されます。

DOM と JavaScript

JavaScript を使用して Web ページ上で実行されるすべての操作は、DOM を通じて実行されます。 DOM 内のオブジェクトにアクセスするにはどうすればよいですか?

最初は親オブジェクトの名前で、次に子オブジェクトの名前がドットで区切られて続きます。

コードをコピー コードは次のとおりです:

window.document.write("こんにちは!お元気ですか!")

DOM 操作 チェックボックス インスタンス
コードをコピーします コードは次のとおりです:



<頭>

DOM 操作チェックボックス

















单机按钮显示效果:
ドキュメントオブジェクトモデルDOM よくある解説_基礎知識
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。