序章

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

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

注: DOMは言語に依存しないか、特定のプログラミング言語から独立するように作成されていますが、このリソース全体を通して、JavaScriptによるHTMLDOMの実装に焦点を当てて参照します。

前提条件

DOMと、それがWebでの作業にどのように関連するかを効果的に理解するには、HTMLおよびCSSの既存の知識が必要です。 基本的なJavaScript構文とコード構造に精通していることも有益です。

DOMとは何ですか?

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

HTMLとCSSのスタイルと構造を解析することに加えて、ブラウザはドキュメントオブジェクトモデルと呼ばれるドキュメントの表現を作成します。 このモデルを使用すると、JavaScriptはオブジェクトとしてWebサイトドキュメントのテキストコンテンツと要素にアクセスできます。

JavaScriptはインタラクティブな言語であり、そうすることで新しい概念を理解しやすくなります。 非常に基本的なウェブサイトを作成しましょう。 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ソースです。 これには、Webサイトドキュメントの最も重要な側面であるDoctypeと、headおよびbodyがネストされたhtmlタグが含まれています。

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

Elements タブの下に、DOMが表示されます。

DOM Example

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

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

documentオブジェクトは、Webサイトへのアクセスと変更に使用できる多くのプロパティおよびメソッドを備えた組み込みオブジェクトです。 DOMの操作方法を理解するには、JavaScriptでオブジェクトがどのように機能するかを理解する必要があります。 オブジェクトの概念に慣れていない場合は、JavaScriptでのオブジェクトの理解を確認してください。

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

  1. 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を変更する方法を示しましょう。 コンソールに次のように入力します。

  1. document.body;

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

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

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

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

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

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

DOM Live Modification

Elements タブに切り替えるか、コンソールにdocument.bodyともう一度入力すると、DOMが変更されていることがわかります。

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

注: background-color CSSプロパティを変更するには、JavaScriptにbackgroundColorと入力する必要がありました。 ハイフンでつながれたCSSプロパティは、JavaScriptのキャメルケースで記述されます。

fuchsiabodyの背景色に割り当てて入力したJavaScriptコードは、DOMの一部になりました。

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

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

結論

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

DOMの詳細については、MozillaDeveloperNetworkのDocumentObject Model(DOM)ページを確認してください。

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