DOMツリーとノードについて

前書き

DOMは、多くの場合* DOMツリー*と呼ばれ、*ノード*と呼ばれるオブジェクトのツリーで構成されます。 Introduction to the DOMで、Document Object Model（DOM）とは何か、「+ document + `https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console[console]、およびHTMLソースコードとDOMの違いを使用してオブジェクトを変更します。

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

HTMLの用語

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

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

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

ここにアンカー要素があります。これは `+ index.html`へのリンクです。

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

開始タグと終了タグの間のすべてが組み合わされて、HTML全体が*要素*になります。

https://www.digitalocean.com/community/tutorials/introduction-to-the-dom [前のチュートリアル]の `+ 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`ファイルに追加し、 + id`を `+ nav +`にします。

index.html

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

</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>

これは、ウェブサイトのフロントエンドにも反映されます。

image：https：//assets.digitalocean.com/articles/eng_javascript/dom/updated-DOM-link.png [DOM経由で更新されたリンク]

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

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

DOMツリーとノード

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

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

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

DOMは、ネストされたノードの* tree 構造で構成され、多くの場合、 DOM tree *と呼ばれます。親、子、兄弟で構成される先祖の家系図に慣れているかもしれません。 DOMのノードは、他のノードとの関係に応じて、親、子、兄弟とも呼ばれます。

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

nodes.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つの子ノードが含まれます。これらはすべて兄弟です-ノードのタイプは、ネストされるレベルを変更しません。

ノードタイプの識別

ドキュメント内のすべてのノードには* node type *があり、これには `+ nodeType +`プロパティを通じてアクセスします。 Mozilla Developer Networkには、https：//developer.mozilla.org/en-US/docs/Web/API/Node/nodeType [すべてのノードタイプ定数]の最新リストがあります。以下は、このチュートリアルで使用している最も一般的なノードタイプのチャートです。

Node Type Value Example

Node Type	Value	Example
`ELEMENT_NODE`	1	The `<body>` element
`TEXT_NODE`	3	Text that is not part of an element
`COMMENT_NODE`	8	`<!-- an HTML comment -->`

ELEMENT_NODE

The <body> element

TEXT_NODE

Text that is not part of an element

COMMENT_NODE

開発者ツールの_Elements_タブでは、DOMの行をクリックして強調表示すると、その隣に「+ == $ 0 」の値が表示されることがわかります。これは、「 $ 0+」と入力することにより、開発者ツールで現在アクティブな要素にアクセスするための非常に便利な方法です。

nodes.html *のコンソールで、 `+ body `の最初の要素をクリックします。これは ` h1 +`要素です。

image：https：//assets.digitalocean.com/articles/eng_javascript/dom/highlighted-line.png [DOM Node Type]

コンソールで、現在選択されているノードの* node type *を `+ nodeType +`プロパティで取得します。

$0.nodeType;

Output1

`+ h1 `要素を選択すると、出力として ` 1 `が表示されます。これは ` ELEMENT_NODE `と相関関係があります。テキストとコメントについても同じ操作を行うと、それぞれ「+3」と「8」が出力されます。

要素へのアクセス方法がわかっている場合、DOMで要素を強調表示せずにノードタイプを表示できます。

document.body.nodeType;

Output1

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

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

これまでは、コンソールでDOMを変更する方法のみを見てきましたが、これは一時的なものです。ページが更新されるたびに、変更は失われます。 Introduction to the 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の*イベント*は、ユーザーが行ったアクションです。ユーザーがマウスを要素の上に置いたり、要素をクリックしたり、キーボードの特定のキーを押したりすると、これらはすべてタイプのイベントになります。この特定のケースでは、ユーザーがボタンをクリックしたときにボタンがリッスンし、アクションを実行する準備ができるようにします。これを行うには、ボタンに*イベントリスナー*を追加します。

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

js / scripts.js

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

`+ addEventListener（）+`メソッドを使用して、ボタンにクリックをリッスンし、クリックされたら機能を実行するように指示します。

js / scripts.js

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

最後に、関数内で、https：//www.digitalocean.com/community/tutorials/introduction-to-the-dom [前のチュートリアル]から同じコードを記述して、背景色を `+ 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`を更新します。ボタンをクリックすると、イベントが発生します。

image：https：//assets.digitalocean.com/articles/eng_javascript/dom/event-button.png [イベントで背景を変更]

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

結論

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

TOC

DOMツリーとノードについて

前書き

HTMLの用語

DOMツリーとノード

ノードタイプの識別

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

結論

Related