DOMの概要

投稿日: 2019-11-08 2022-10-07
タグ: Development, javascript

序章

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

ウェブサイトが画像のスライドショー間を回転したり、ユーザーが不完全なフォームを送信しようとしたときにエラーを表示したり、ナビゲーションメニューを切り替えたりするなどのアクションを実行するときはいつでも、JavaScriptがDOMにアクセスして操作した結果です。この記事では、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と html のタグ head と body 内部にネストされています。

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

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

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

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

The document オブジェクトは、Webサイトへのアクセスと変更に使用できる多くのプロパティおよびメソッドを持つ組み込みオブジェクトです。 DOMの操作方法を理解するには、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 要素とその中のすべて。

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

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

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

要素タブに切り替えるか、次のように入力します document.body 再びコンソールに入ると、DOMが変更されていることがわかります。

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

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

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

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

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

結論

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

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

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

getdocs

13036