TOC

DOMの概要

前書き

通常* DOM と呼ばれる Document Object Model *は、Webサイトをインタラクティブにする重要な部分です。 これは、プログラミング言語がWebサイトのコンテンツ、構造、およびスタイルを操作できるようにするインターフェイスです。 JavaScriptは、インターネットブラウザーでDOMに接続するクライアント側のスクリプト言語です。

Webサイトが画像のスライドショー間を回転する、ユーザーが不完全なフォームを送信しようとしたときにエラーを表示する、ナビゲーションメニューを切り替えるなどのアクションを実行するほとんどの場合、それはJavaScriptがDOMにアクセスして操作した結果です。 この記事では、DOMとは何か、 `+ document +`オブジェクトを操作する方法、HTMLソースコードとDOMの違いについて学びます。

前提条件

DOMを効果的に理解し、DOMとWebの操作との関係を理解するには、https：//developer.mozilla.org/en-US/docs/Web/HTML [HTML]およびhttpsの既存の知識が必要です。 ：//developer.mozilla.org/en-US/docs/Web/CSS [CSS]。 基本的なhttps://www.digitalocean.com/community/tutorials/understanding-syntax-and-code-structure-in-javascript[JavaScriptの構文とコード構造]に精通していることも有益です。

DOMとは何ですか？

最も基本的なレベルでは、WebサイトはHTMLドキュメントで構成されます。 Webサイトを表示するために使用するブラウザーは、HTMLとCSSを解釈し、スタイル、コンテンツ、および構造を表示するページにレンダリングするプログラムです。

HTMLおよびCSSのスタイルと構造の解析に加えて、ブラウザーは、ドキュメントオブジェクトモデルとして知られるドキュメントの表現を作成します。 この* model により、JavaScriptはWebサイト text のテキストコンテンツと要素に objects *としてアクセスできます。

JavaScriptは対話型言語であり、実行することで新しい概念を理解しやすくなります。 非常に基本的なWebサイトを作成しましょう。 `+ index.html`ファイルを作成し、新しいプロジェクトディレクトリに保存します。

index.html

<!DOCTYPE html>
<html lang="en">

 <head>
   <title>Learning the DOM</title>
 </head>

 <body>
   <h1>Document Object Model</h1>
 </body>

</html>

このコードは、新しいWebサイトスケルトンの一般的なHTMLソースです。 それは、ウェブサイト文書の絶対的な最も重要な側面-doctype、および内部にネストされた `+ head `と ` body `を持つ ` html +`タグを含んでいます。

ここでは、Chromeブラウザを使用しますが、他の最新のブラウザから同様の出力を受け取ることができます。 Chrome内で、 `+ index.html`を開きます。 「Document Object Model」という見出しのプレーンなWebサイトが表示されます。 ページ上の任意の場所を右クリックして、「検査」を選択します。 これにより、開発者ツールが開きます。

[要素]タブの下に、DOMが表示されます。

image：https：//assets.digitalocean.com/articles/eng_javascript/dom/the-dom.png [DOM Example]

この場合、展開すると、先ほど作成したHTMLソースコードとまったく同じになります-doctype、および追加した他のいくつかのHTMLタグ。 各要素にカーソルを合わせると、レンダリングされたWebサイトの各要素が強調表示されます。 HTML要素の左側にある小さな矢印を使用すると、ネストされた要素の表示を切り替えることができます。

ドキュメントオブジェクト

`+ document +`オブジェクトは、Webサイトへのアクセスと変更に使用できる多くの*プロパティ*と*メソッド*を備えた組み込みオブジェクトです。 DOMの操作方法を理解するには、JavaScriptでオブジェクトがどのように機能するかを理解する必要があります。 オブジェクトの概念に不安がある場合は、https：//www.digitalocean.com/community/tutorials/understanding-objects-in-javascript [JavaScriptのオブジェクトを理解する]を確認してください。

  • index.html *の開発者ツールで、[コンソール]タブに移動します。 コンソールに「+ document」と入力し、「+ ENTER」を押します。 出力されるものは、_Elements_タブに表示されるものと同じであることがわかります。

document;
Output#document
<!DOCTYPE html>
<html lang="en">

 <head>
   <title>Learning the DOM</title>
 </head>

 <body>
   <h1>Document Object Model</h1>
 </body>

</html>

「+ document 」と入力してコンソールで直接操作することは、通常デバッグ以外で行うことではありませんが、以下で説明するように、「 document +」オブジェクトとその修正方法を正確に固めるのに役立ちます。

DOMとHTMLソースコードの違いは何ですか？

現在、この例では、HTMLソースコードとDOMはまったく同じもののようです。 ブラウザで生成されたDOMがHTMLソースコードと異なる2つのインスタンスがあります。

  • DOMはクライアント側のJavaScriptによって変更されます

  • ブラウザはソースコードのエラーを自動的に修正します

クライアント側のJavaScriptでDOMを変更する方法を示しましょう。 コンソールに次を入力します。

document.body;

コンソールは次の出力で応答します。

Output<body>
 <h1>Document Object Model</h1>
</body>

+ document`はオブジェクトで、 + body + `はドット表記でアクセスしたオブジェクトのプロパティです。 コンソールに `+ document.body `を送信すると、 ` body +`要素とその中のすべてが出力されます。

コンソールでは、このWebサイトの `+ body `オブジェクトのライブプロパティの一部を変更できます。 「 style」属性を編集して、背景色を「+ fuchsia」に変更します。 これをコンソールに入力します。

document.body.style.backgroundColor = 'fuchsia';

上記のコードを入力して送信すると、背景色が変化するため、サイトのライブ更新が表示されます。

image：https：//assets.digitalocean.com/articles/eng_javascript/dom/modifying-the-dom.png [DOM Live Modification]

_Elements_タブに切り替えるか、コンソールに `+ document.body +`を再度入力すると、DOMが変更されたことがわかります。

Output<body style="background-color: fuchsia;">
 <h1>Document Object Model</h1>
</body>

入力したJavaScriptコードは、「+ body 」の背景色に「 fuchsia +」を割り当てて、DOMの一部になりました。

ただし、ページを右クリックして、「ページのソースを表示」を選択します。 Webサイトのソースには、JavaScriptを介して追加した新しいスタイル属性が含まれていません。 Webサイトのソースは変更されず、クライアント側のJavaScriptの影響を受けません。 ページを更新すると、コンソールに追加した新しいコードが消えます。

DOMの出力がHTMLソースコードと異なる場合があるもう1つの例は、ソースコードにエラーがある場合です。 この一般的な例の1つは、「+ table」タグです。「+ table 」内に「 tbody」タグが必要ですが、開発者がHTMLに含めることができないことがよくあります。 ブラウザは自動的にエラーを修正し、 `+ tbody +`を追加してDOMを修正します。 DOMは、閉じられていないタグも修正します。

結論

このチュートリアルでは、DOMを定義し、 `+ document `オブジェクトにアクセスし、JavaScriptとコンソールを使用して ` document +`オブジェクトのプロパティを更新し、HTMLソースコードとDOMの違いを調べました。

DOMの詳細については、Mozilla Developer Networkのhttps://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model[Document Object Model（DOM）]ページを確認してください。

次のチュートリアルでは、重要なHTMLの用語を確認し、DOMツリーについて学習し、ノードとは何か、最も一般的なタイプのノードについて学習し、JavaScriptでインタラクティブスクリプトの作成を開始します。

Related