DOMプログラミング:コードでWebページを操作する

開示: あなたのサポートはサイトの運営を維持するのに役立ちます!このページで推奨する一部のサービスについては、紹介料を稼ぎます.


ドキュメントオブジェクトモデルまたはDOMは、HTMLページのすべての要素がドキュメント自体にどのように関連するかを記述します.

本質的には、WebにアップロードされたすべてのHTML、XHTML、またはXMLページがドキュメントになります。 DOMはこれらのドキュメントをツリー構造として認識します。ドキュメント自体が最上位の構造であり、ページの各要素はオブジェクトとして表されます.

これは、すべての画像、すべての段落、すべての見出しなどが、ドキュメントとの独自の関係を持つ個別のオブジェクトであることを意味します.

特定の要素をその名前で呼び出すことにより、Web開発者はその要素を変更できます。つまり、Web開発者はプロパティを取得および設定できます.

DOMは、要素やオブジェクトの追加や削除も可能にします。最後に、Web開発者はユーザーまたはブラウザのアクションをキャプチャして応答し、イベントを効果的に処理できます。.

DOMの簡単な歴史

DOMの歴史は、ブラウザ戦争の時代と最初のスクリプト言語のリリースにさかのぼります。.

NetscapeのナビゲーターとMicrosoftのInternet Explorerの両方が独自のバージョンのJavaScriptをリリースした後、開発者はそれらのスクリプト言語でページ上の要素にアクセスできるようにするインターフェイスが必要であることに気付きました。.

当然、各ブラウザーには独自の方法がありましたが、ブラウザーベンダーが新機能を追加することでお互いに勝ち取ろうとしたため、多くの互換性の問題が発生しました.

最終的に、W3Cは、すべてのブラウザー間で移植可能であると想定されていたレベル1 DOMとも呼ばれるXML DOMの仕様に取り組み始めました。.

また、XMLドキュメントを操作できるすべてのプログラミング言語で機能することも意図されていました。この仕様は1998年後半に標準として採用されました。現在のバージョンはDOM 4であり、2015年のW3C勧告です。.

DOMの2つのビュー

DOMは2つの部分で構成されます。コアとHTML。コアはHTMLパーツの基礎であり、XMLドキュメントがドキュメント構造、その要素、および属性を操作するために必要な機能を表すために使用されます.

HTML部分は、特定のHTML要素とその機能を定義します。そのため、DOMはAPIとオブジェクトの両方と見なされます.

APIとしてのDOM

アプリケーションプログラミングインターフェイス(API)として、HTMLおよびXMLドキュメントの両方に使用されます。これらのドキュメントで使用されるオブジェクトの標準セットを提供し、それらのオブジェクトを結合、アクセス、および操作する方法のモデルとしても機能します.

オブジェクトとしてのDOM

DOMのオブジェクトモデルとは、ドキュメントと要素がオブジェクトとして定義されていることを指します。その意味で、次のことを識別します。

  • ドキュメントの表現と操作に使用されるインターフェースとオブジェクト
  • 彼らの行動と属性
  • 彼らの関係.

DOM構造

構造的に、DOMはモデル化するドキュメントに非常に似ています。ドキュメントのすべての要素は、オブジェクトまたはノードとして認識され、階層的に編成されています.

各ノードには関数とIDがあり、各ノードは任意の数の子ノードを持つことができます。最も一般的なノードは、要素、テキスト、属性です.

要素ノード

要素ノードは、HTMLコード内の個々のタグまたはタグのペアです。それらは他の要素またはテキストノードであるかもしれない子ノードを持つことができます.

テキストノード

テキストノードは、HTMLタグ間の実際のコンテンツです。通常、親ノードと兄弟ノードがありますが、独自の子ノードを持つことはできません.

属性ノード

属性ノードはやや特殊です。親ノード、子、兄弟ノードはありませんが、代わりに、aタグのhref属性やimgタグのsrc属性など、HTMLタグで定義された属性を表します。.

document.createAttribute()を使用して新しい属性を作成し、要素ノードに割り当ててその値を設定できます。属性を参照する別の方法は、getAttribute()を使用して要素の属性に直接アクセスし、setAttribute()メソッドを使用してその値を設定することです.

属性について話すとき、HTMLタグで使用されるほとんどの属性は比較的単純であり、そのタグに関連付けられた特定のプロパティの単一の値で構成されることを言及する価値があります。ただし、より複雑なスタイル属性もあります。.

CSSを使用してスタイル属性を適用します。これを使用して、個々のタグ、特定のタイプのすべてのタグにスタイルを適用するか、クラスを使用してスタイル属性を割り当てることができます。.

さらに厄介なことに、特定の要素のスタイルは、これらのソースのいずれかから継承できます。タグのスタイル属性を変更するか、タグのクラス属性を使用して、これらのスタイルを操作および変更することもできます.

ただし、これを行うと、要素のすべてのスタイルパラメータが変更され、場合によっては、特に単一のスタイルパラメータのみを変更する場合は実用的ではありません.

幸い、スタイル属性は他の属性とは異なります。それらはオブジェクトとして定義され、すべての可能なパラメーターのプロパティを持っています。これらのプロパティは、アクセス、更新、その他の操作が可能です。.

DOMの使用

各ドキュメントはオブジェクトでもあるため、ドキュメント内の他のノードを操作するための開始点として機能します。これらの子ノードは、次のメソッドを使用してアクセスおよび操作できます。

  • getElementById()
  • getElementsByTagName()
  • createElement()
  • createAttribute()
  • createTextNode().

次のメソッドを使用して、ノードを動的に追加、更新、削除することもできます。

  • insertBefore()
  • replaceChild()
  • removeChild()
  • appendChild()
  • cloneNode().

DOMは、HTML、CSS、JavaScriptに直接関連付けられています。これは、これらの標準によって定義されたタグと属性を反映し、クライアント側スクリプトのAPIとしても機能するためです。.

資源

以下のリソースのリストは、DOMの詳細な概要を示しており、初心者と上級ユーザーの両方に適しています。リファレンスリストと、例付きのリソースも含まれています.

  • JavaScriptとDOMシリーズ:これは、JavaScriptを使用してDOMを操作する方法について非常に詳細に説明した、非常に詳細なチュートリアルシリーズです。.
  • JavaScript DOMチュートリアル:JavaScriptからDOMにアクセスして操作する方法を教えるインタラクティブなチュートリアルのセット。 JavaScriptの事前知識があることを前提としていますが、特定のライブラリが使用されていないことは言及する価値があります.
  • DOMノード:DOMがどのように構造化され、どのノードに含まれるかを理解したい初心者に適したDOMノードの非常に詳細な概要.
  • JavaScript DOM —演習、実践、解決策:単純な演習からより複雑な演習まで、DOMに関連する一連のさまざまな演習.
  • W3C Document Object Model(DOM):W3Cによって発行されたこのガイドは、DOMの概要と初心者にやさしい概要、歴史、そしてそれがどのように機能するかを提供します.
  • DOMの紹介:Mozilla Developer Networkによって公開されたDOMの簡単な概念紹介。HTMLとXMLドキュメントの構造を提供し、それにアクセスする方法を説明しています。.
  • W3C DOM4:2015年以降のW3Cによる最新のDOM推奨。DOMの概要と詳細な仕様が含まれています.
  • DOMリファレンス:プロパティ、メソッド、イベントなどを含む、Microsoft Developer Networkが公開する便利なリファレンスリスト.

本から学ぶことを好むなら、多くのオプションがあります。リストにある本は、DOM、その仕組み、およびドキュメントの操作方法について詳しく説明しています。.

  • DOM Scripting:Web Design with JavaScript and the Document Object Model(2005)、by Jeremy Keith:この本は、コードの専門家ではないが、JavaScriptとDOMをすばやく習得して活用したいと考えている人向けに、素早く簡単なリファレンスを提供します。 Webサイトへの機能。たくさんの例が含まれており、いくつかの現実世界のプロジェクトの構築を通して読者をガイドします.
  • Document Object Model(2002)、Joe Marini著:この本の著者は、DOMの概念、設計、理論、および起源を学ぶのに役立ちます。本全体を通して、DOMを使用してドキュメントのノードとコンテンツを検査、ナビゲート、操作します。次に、再コーディングせずにDOM準拠の実装に簡単に移植できる便利なアプリケーションを構築する方法を学ぶ.
  • DOM Enlightenment:Exploring JavaScript and the Modern DOM(2013)、Cody Lindley:この本の助けを借りて、DOMライブラリを使用せずにドキュメントオブジェクトモデル(DOM)をスクリプト化することにより、HTMLをより効率的に操作する方法を学びます。ダイジェストしやすい例が豊富にある著者は、さまざまなノードオブジェクトがどのように機能するかを示すために、最新のDOM概念の完全なウォークスルーを提供します.

DOMを前進および横断する

DOMを理解することは、意欲的なWeb開発者にとって不可欠な概念の1つです。.

それについての最もよい部分はあなたがそれを使い始めるのに特別な道具を必要としないということです。必要なのは、スクリプトと優先ブラウザーだけです。スクリプトを作成してWebページに含めるとすぐに、ドキュメントまたはウィンドウ要素のAPIを使用して、さまざまな方法でドキュメントを操作できます.

上記のリソースは、DOMをトラバースする際の確実な出発点として役立ちます。.

参考資料とリソース

コーディングとウェブサイトの開発に関連するガイド、チュートリアル、およびインフォグラフィックが他にもあります。

  • 適切なHTMLの作成:これは、整形式のHTMLを記述し、HTML検証ソフトウェアを使用するための確かな紹介です。.
  • CSS3 —イントロ、ガイド、リソース:Webページのレイアウトを学ぶのに最適な場所です。.
  • ASP.NETリソース:このガイドでは、Webページを作成するためのMicrosoftの.NETフレームワークについて説明します.

初心者のためのHTML —究極のガイド

あなたが本当にHTMLを学びたいなら、私たちは本の長さの記事、初心者のためのHTML — Ultimate Guideを作成しました。.

そしてそれは本当に究極のガイドです。最初から習得する.

初心者のためのHTML-究極のガイド
初心者のためのHTML —究極のガイド

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map