序章
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サイトを変更できるスクリプトを作成しました。