DOMに変更を加える方法
序章
DOM シリーズの理解の前の2回の記事では、DOMの要素にアクセスする方法とDOMをトラバースする方法を学びました。 この知識を使用すると、開発者はクラス、タグ、ID、およびセレクターを使用してDOM内の任意のノードを検索し、親、子、および兄弟のプロパティを使用して相対ノードを検索できます。
DOMに完全に習熟するための次のステップは、ノードを追加、変更、置換、および削除する方法を学ぶことです。 To Doリストアプリケーションは、DOM内の要素を作成、変更、および削除できる必要があるJavaScriptプログラムの1つの実用的な例です。
このチュートリアルでは、新しいノードを作成してDOMに挿入し、既存のノードを置き換え、ノードを削除する方法について説明します。
新しいノードの作成
静的なWebサイトでは、.html
ファイルにHTMLを直接書き込むことにより、要素がページに追加されます。 動的Webアプリでは、要素とテキストがJavaScriptで追加されることがよくあります。 createElement()
およびcreateTextNode()
メソッドは、DOMに新しいノードを作成するために使用されます。
プロパティ/メソッド | 説明 |
---|---|
createElement() |
新しい要素ノードを作成します |
createTextNode() |
新しいテキストノードを作成します |
node.textContent |
要素ノードのテキストコンテンツを取得または設定します |
node.innerHTML |
要素のHTMLコンテンツを取得または設定します |
まず、index.html
ファイルを作成し、新しいプロジェクトディレクトリに保存しましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning the DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>
ページの任意の場所を右クリックし、[検査]を選択して開発者ツールを開き、コンソールに移動します。
document
オブジェクトでcreateElement()
を使用して、新しいp
要素を作成します。
- const paragraph = document.createElement('p');
新しいp
要素を作成しました。これは、コンソールでテストできます。
- console.log(paragraph)
Output<p></p>
paragraph
変数は、空のp
要素を出力します。これは、テキストがないとあまり役に立ちません。 要素にテキストを追加するために、textContent
プロパティを設定します。
- paragraph.textContent = "I'm a brand new paragraph.";
- console.log(paragraph)
Output<p>I'm a brand new paragraph.</p>
createElement()
とtextContent
の組み合わせにより、完全な要素ノードが作成されます。
要素のコンテンツを設定する別の方法は、innerHTML
プロパティを使用することです。これにより、要素にテキストだけでなくHTMLも追加できます。
- paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text.";
注:これは機能し、要素にコンテンツを追加する一般的な方法ですが、textContent
を使用することをお勧めします。これにより、HTMLタグが削除されます。
createTextNode()
メソッドを使用してテキストノードを作成することもできます。
- const text = document.createTextNode("I'm a new text node.");
- console.log(text)
Output"I'm a new text node."
これらのメソッドを使用して、新しい要素とテキストノードを作成しましたが、ドキュメントに挿入されるまで、Webサイトのフロントエンドには表示されません。
DOMへのノードの挿入
フロントエンドで作成した新しいテキストノードと要素を表示するには、それらをdocument
に挿入する必要があります。 メソッドappendChild()
およびinsertBefore()
は、親要素の最初、中間、または最後にアイテムを追加するために使用され、replaceChild()
は、古いノードを新しいノードに置き換えるために使用されますノード。
プロパティ/メソッド | 説明 |
---|---|
node.appendChild() |
親要素の最後の子としてノードを追加します |
node.insertBefore() |
指定された兄弟ノードの前の親要素にノードを挿入します |
node.replaceChild() |
既存のノードを新しいノードに置き換えます |
これらのメソッドを練習するために、HTMLでやることリストを作成しましょう。
<ul>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
</ul>
ブラウザにページをロードすると、次のようになります。
To Doリストの最後に新しい項目を追加するには、上記の「新しいノードの作成」セクションで行ったように、最初に要素を作成してテキストを追加する必要があります。
- // To-do list ul element
- const todoList = document.querySelector('ul');
-
- // Create new to-do
- const newTodo = document.createElement('li');
- newTodo.textContent = 'Do homework';
新しいやることの完全な要素ができたので、appendChild()
を使用してリストの最後に追加できます。
- // Add new todo to the end of the list
- todoList.appendChild(newTodo);
ul
の最後に新しいli
要素が追加されていることがわかります。
<ul>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>
おそらく、より優先度の高いタスクを実行する必要があり、それをリストの先頭に追加したいと思います。 createElement()
は1つの要素のみを作成し、再利用できないため、別の要素を作成する必要があります。
- // Create new to-do
- const anotherTodo = document.createElement('li');
- anotherTodo.textContent = 'Pay bills';
insertBefore()
を使用してリストの先頭に追加できます。 このメソッドは2つの引数を取ります。1つ目は追加される新しい子ノードであり、2つ目は新しいノードの直後に続く兄弟ノードです。 つまり、次の兄弟ノードの前に新しいノードを挿入します。 これは、次の擬似コードのようになります。
parentNode.insertBefore(newNode, nextSibling);
To Doリストの例では、リストの最初の要素の子の前に新しいanotherTodo
要素を追加します。これは、現在Buy groceries
リストアイテムです。
- // Add new to-do to the beginning of the list
- todoList.insertBefore(anotherTodo, todoList.firstElementChild);
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>
リストの先頭に新しいノードが正常に追加されました。 これで、親要素にノードを追加する方法がわかりました。 次に実行したいのは、既存のノードを新しいノードに置き換えることです。
ノードを置き換える方法を示すために、既存のToDoを変更します。 新しい要素を作成する最初のステップは同じままです。
- const modifiedTodo = document.createElement('li');
- modifiedTodo.textContent = 'Feed the dog';
insertBefore()
と同様に、replaceChild()
は、次の擬似コードに示すように、新しいノードと置き換えられるノードの2つの引数を取ります。
parentNode.replaceChild(newNode, oldNode);
リストの3番目の要素の子を変更されたto-doに置き換えます。
- // Replace existing to-do with modified to-do
- todoList.replaceChild(modifiedTodo, todoList.children[2]);
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the dog</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>
appendChild()
、insertBefore()
、およびreplaceChild()
の組み合わせにより、DOM内の任意の場所にノードと要素を挿入できます。
DOMからのノードの削除
これで、要素を作成し、それらをDOMに追加し、既存の要素を変更する方法がわかりました。 最後のステップは、DOMから既存のノードを削除する方法を学ぶことです。 子ノードはremoveChild()
で親から削除でき、ノード自体はremove()
で削除できます。
方法 | 説明 |
---|---|
node.removeChild() |
子ノードを削除します |
node.remove() |
ノードを削除します |
上記のやることの例を使用して、アイテムが完了した後にアイテムを削除したいと思います。 宿題が終わったら、リストの最後の子であるDo homework
アイテムをremoveChild()
で削除できます。
- todoList.removeChild(todoList.lastElementChild);
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the dog</li>
<li>Do laundry</li>
</ul>
別の方法は、ノードで直接remove()
メソッドを使用して、ノード自体を削除することです。
- // Remove second element child from todoList
- todoList.children[1].remove();
<ul>
<li>Pay bills</li>
<li>Feed the dog</li>
<li>Do laundry</li>
</ul>
removeChild()
とremove()
の間で、DOMから任意のノードを削除できます。 DOMから子要素を削除するために表示される別の方法は、親要素のinnerHTML
プロパティを空の文字列(""
)に設定することです。 これはあまり明確ではないため、推奨される方法ではありませんが、既存のコードで表示される場合があります。
結論
このチュートリアルでは、JavaScriptを使用して新しいノードと要素を作成し、それらをDOMに挿入し、既存のノードと要素を置き換えて削除する方法を学びました。
DOMシリーズの理解のこの時点で、DOM内の任意の要素にアクセスし、DOM内の任意のノードをウォークスルーし、DOM自体を変更する方法を理解しています。 これで、JavaScriptを使用して基本的なフロントエンドWebアプリを作成することに自信を持つことができます。