DOMツリーとノードを理解する

序章

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]がnavで追加してみましょう。

index.html

...
<body>
  <h1>Document Object Model</h1>
  <a id="nav" href="index.html">Home</a>
</body>
...

ブラウザウィンドウでページをロードまたはリロードし、DOMを調べて、コードが更新されていることを確認します。

getElementById()メソッドを使用して、要素全体にアクセスします。コンソールで、次のように入力します。

document.getElementById('nav');

Output<a id="nav" href="index.html">Home</a>

getElementById()を使用して要素全体を取得しました。これで、navリンクにアクセスするたびにそのオブジェクトとメソッドを入力する代わりに、要素を変数に配置して、より簡単に操作できるようになりました。

let navLink = document.getElementById('nav');

navLink変数には、アンカー要素が含まれています。ここから、属性と値を簡単に変更できます。たとえば、href属性を変更することで、リンクの行き先を変更できます。

navLink.href = 'https://www.wikipedia.org';

textContentプロパティを再割り当てして、テキストの内容を変更することもできます。

navLink.textContent = 'Navigate to Wikipedia';

これで、コンソールで、または Elements タグをチェックして要素を表示すると、要素がどのように更新されたかを確認できます。

navLink;

Output<a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>

これは、Webサイトのフロントエンドにも反映されています。

ページを更新すると、すべてが元の値に戻ります。

この時点で、documentメソッドを使用して要素にアクセスする方法、要素を変数に割り当てる方法、および要素のプロパティと値を変更する方法を理解する必要があります。

DOMツリーとノード

DOM内のすべてのアイテムは、ノードとして定義されています。ノードには多くの種類がありますが、私たちが最も頻繁に使用する主なノードは3つあります。

要素ノード
テキストノード
コメントノード

HTML要素がDOM内のアイテムである場合、それは要素ノードと呼ばれます。要素の外側にある唯一のテキストはテキストノードであり、HTMLコメントはコメントノードです。これらの3つのノードタイプに加えて、document自体はdocument ノードであり、他のすべてのノードのルートです。

DOMは、ネストされたノードのツリー構造で構成されます。これは、DOMツリーと呼ばれることがよくあります。あなたは、親、子供、兄弟で構成される祖先の家系図に精通しているかもしれません。 DOM内のノードは、他のノードとの関係に応じて、親、子、および兄弟とも呼ばれます。

実例を示すために、nodes.htmlファイルを作成します。テキスト、コメント、要素ノードを追加します。

ノード.html

<!DOCTYPE html>
<html>

  <head>
    <title>Learning About Nodes</title>
  </head>

  <body>
    <h1>An element node</h1>
    <!-- a comment node -->
    A text node.
  </body>

</html>

html要素ノードは親ノードです。 headとbodyは兄弟であり、htmlの子です。 bodyには、すべて兄弟である3つの子ノードが含まれています。ノードのタイプによって、ネストされるレベルは変更されません。

注： HTMLで生成されたDOMを使用する場合、HTMLソースコードをインデントすると、多くの空のテキストノードが作成され、[DevToolsの要素]タブには表示されません。 DOMの空白について読む

ノードタイプの識別

ドキュメント内のすべてのノードにはノードタイプがあり、nodeTypeプロパティを介してアクセスされます。 Mozilla Developer Networkには、すべてのノードタイプ定数の最新リストがあります。以下は、このチュートリアルで使用している最も一般的なノードタイプのチャートです。

ノードタイプ	価値	例
`ELEMENT_NODE`	1	`<body>`要素
`TEXT_NODE`	3	要素の一部ではないテキスト
`COMMENT_NODE`	8	`<!-- an HTML comment -->`

開発者ツールの要素タブで、DOM内の任意の行をクリックして強調表示すると、その横に== $0の値が表示されることに気付く場合があります。これは、$0と入力して、開発者ツールで現在アクティブな要素にアクセスするための非常に便利な方法です。

nodes.html のコンソールで、h1要素であるbodyの最初の要素をクリックします。

コンソールで、nodeTypeプロパティを使用して、現在選択されているノードのノードタイプを取得します。

$0.nodeType;

Output1

h1要素を選択すると、1が出力として表示されます。これは、ELEMENT_NODEと相関していることがわかります。テキストとコメントについても同じようにすると、それぞれ3と8が出力されます。

要素にアクセスする方法を知っていると、DOMで要素を強調表示せずにノードタイプを確認できます。

document.body.nodeType;

Output1

nodeTypeに加えて、nodeValueプロパティを使用してテキストまたはコメントノードの値を取得し、nodeNameを使用して要素のタグ名を取得することもできます。

イベントを使用したDOMの変更

これまで、コンソールでDOMを変更する方法を見てきましたが、これは一時的なものです。ページが更新されるたびに、変更は失われます。 DOM チュートリアルの概要では、コンソールを使用してボディの背景色を更新しました。このチュートリアルで学んだことを組み合わせて、クリックしたときにこれを行うインタラクティブなボタンを作成できます。

index.htmlファイルに戻り、idを使用してbutton要素を追加しましょう。また、新しいjsディレクトリjs/scripts.jsに新しいファイルへのリンクを追加します。

index.html

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

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

  <body>
    <h1>Document Object Model</h1> 
    <button id="changeBackground">Change Background Color</button>
    
    <script src="scripts.js"></script>
  </body>

</html>

JavaScriptのeventは、ユーザーが実行したアクションです。ユーザーが要素の上にマウスを置いたり、要素をクリックしたり、キーボードの特定のキーを押したりすると、これらはすべてタイプのイベントです。この特定のケースでは、ボタンをリッスンし、ユーザーがボタンをクリックしたときにアクションを実行できるようにする必要があります。これを行うには、イベントリスナーをボタンに追加します。

scripts.jsを作成し、新しいjsディレクトリに保存します。ファイル内で、最初にbutton要素を見つけて、それを変数に割り当てます。

js / scripts.js

let button = document.getElementById('changeBackground');

addEventListener()メソッドを使用して、クリックをリッスンするようにボタンに指示し、クリックされると機能を実行します。

js / scripts.js

...
button.addEventListener('click', () => {
  // action will go here
});

最後に、関数内で、前のチュートリアルと同じコードを記述して、背景色をfuchsiaに変更します。

js / scripts.js

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

スクリプト全体は次のとおりです。

js / scripts.js

let button = document.getElementById('changeBackground');

button.addEventListener('click', () => {
  document.body.style.backgroundColor = 'fuchsia';
});

このファイルを保存したら、ブラウザでindex.htmlを更新してください。ボタンをクリックすると、イベントが発生します。

JavaScriptイベントにより、ページの背景色がフクシアに変更されました。

結論

このチュートリアルでは、DOMを理解して変更できるようにする用語を確認しました。 DOMが、通常はHTML要素、テキスト、またはコメントであるノードのツリーとしてどのように構造化されているかを学び、ユーザーが開発者コンソールに手動でコードを入力しなくてもWebサイトを変更できるスクリプトを作成しました。