序章

DOMはDOMツリーと呼ばれることが多く、ノードと呼ばれるオブジェクトのツリーで構成されます。 DOMの概要では、ドキュメントオブジェクトモデル（DOM）とは何か、documentオブジェクトにアクセスし、コンソールを使用してそのプロパティを変更する方法について説明しました。 、およびHTMLソースコードとDOMの違い。

このチュートリアルでは、JavaScriptとDOMの操作に不可欠なHTML用語を確認し、DOMツリー、ノードとは何か、および最も一般的なノードタイプを識別する方法について学習します。 最後に、コンソールを超えて、DOMをインタラクティブに変更するJavaScriptプログラムを作成します。

HTML用語

HTMLとJavaScriptの用語を理解することは、DOMの操作方法を理解するために不可欠です。 HTMLの用語を簡単に確認してみましょう。

まず、このHTML要素を見てみましょう。

<a href="index.html">Home</a>

ここに、index.htmlへのリンクであるアンカー要素があります。

  • aはタグです
  • hrefは属性です
  • index.htmlは属性値です
  • Homeはテキストです。

開始タグと終了タグの間のすべてを組み合わせて、HTML要素全体を作成します。

前のチュートリアルのindex.htmlを使用します。

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

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

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

</html>

JavaScriptを使用して要素にアクセスする最も簡単な方法は、id属性を使用することです。 上記のリンクをindex.htmlファイルに[X75X]