序章

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ファイルを作成し、新しいプロジェクトディレクトリに保存しましょう。

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要素を作成します。

  1. const paragraph = document.createElement('p');

新しいp要素を作成しました。これは、コンソールでテストできます。

  1. console.log(paragraph)
Output
<p></p>

paragraph変数は、空のp要素を出力します。これは、テキストがないとあまり役に立ちません。 要素にテキストを追加するために、textContentプロパティを設定します。

  1. paragraph.textContent = "I'm a brand new paragraph.";
  2. console.log(paragraph)
Output
<p>I'm a brand new paragraph.</p>

createElement()textContentの組み合わせにより、完全な要素ノードが作成されます。

要素のコンテンツを設定する別の方法は、innerHTMLプロパティを使用することです。これにより、要素にテキストだけでなくHTMLも追加できます。

  1. paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text.";

注:これは機能し、要素にコンテンツを追加する一般的な方法ですが、 [の使用に関連してクロスサイトスクリプティング(XSS)のリスクが発生する可能性があります。 X183X]メソッド。インラインJavaScriptを要素に追加できるため。 したがって、代わりにtextContentを使用することをお勧めします。これにより、HTMLタグが削除されます。

createTextNode()メソッドを使用してテキストノードを作成することもできます。

  1. const text = document.createTextNode("I'm a new text node.");
  2. console.log(text)
Output
"I'm a new text node."

これらのメソッドを使用して、新しい要素とテキストノードを作成しましたが、ドキュメントに挿入されるまで、Webサイトのフロントエンドには表示されません。

DOMへのノードの挿入

フロントエンドで作成した新しいテキストノードと要素を表示するには、それらをdocumentに挿入する必要があります。 メソッドappendChild()およびinsertBefore()は、親要素の最初、中間、または最後にアイテムを追加するために使用され、replaceChild()は、古いノードを新しいノードに置き換えるために使用されますノード。

プロパティ/メソッド 説明
node.appendChild() 親要素の最後の子としてノードを追加します
node.insertBefore() 指定された兄弟ノードの前の親要素にノードを挿入します
node.replaceChild() 既存のノードを新しいノードに置き換えます

これらのメソッドを練習するために、HTMLでやることリストを作成しましょう。

todo.html
<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
</ul>

ブラウザにページをロードすると、次のようになります。

DOM Screenshot 1

To Doリストの最後に新しい項目を追加するには、上記の「新しいノードの作成」セクションで行ったように、最初に要素を作成してテキストを追加する必要があります。

  1. // To-do list ul element
  2. const todoList = document.querySelector('ul');
  3. // Create new to-do
  4. const newTodo = document.createElement('li');
  5. newTodo.textContent = 'Do homework';

新しいやることの完全な要素ができたので、appendChild()を使用してリストの最後に追加できます。

  1. // Add new todo to the end of the list
  2. todoList.appendChild(newTodo);

ulの最後に新しいli要素が追加されていることがわかります。

todo.html
<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

DOM Screenshot 2

おそらく、より優先度の高いタスクを実行する必要があり、それをリストの先頭に追加したいと思います。 createElement()は1つの要素のみを作成し、再利用できないため、別の要素を作成する必要があります。

  1. // Create new to-do
  2. const anotherTodo = document.createElement('li');
  3. anotherTodo.textContent = 'Pay bills';

insertBefore()を使用してリストの先頭に追加できます。 このメソッドは2つの引数を取ります。1つ目は追加される新しい子ノードであり、2つ目は新しいノードの直後に続く兄弟ノードです。 つまり、次の兄弟ノードの前に新しいノードを挿入します。 これは、次の擬似コードのようになります。

parentNode.insertBefore(newNode, nextSibling);

To Doリストの例では、リストの最初の要素の子の前に新しいanotherTodo要素を追加します。これは、現在Buy groceriesリストアイテムです。

  1. // Add new to-do to the beginning of the list
  2. todoList.insertBefore(anotherTodo, todoList.firstElementChild);
todo.html
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

DOM Screenshot 3

リストの先頭に新しいノードが正常に追加されました。 これで、親要素にノードを追加する方法がわかりました。 次に実行したいのは、既存のノードを新しいノードに置き換えることです。

ノードを置き換える方法を示すために、既存のToDoを変更します。 新しい要素を作成する最初のステップは同じままです。

  1. const modifiedTodo = document.createElement('li');
  2. modifiedTodo.textContent = 'Feed the dog';

insertBefore()と同様に、replaceChild()は、次の擬似コードに示すように、新しいノードと置き換えられるノードの2つの引数を取ります。

parentNode.replaceChild(newNode, oldNode);

リストの3番目の要素の子を変更されたto-doに置き換えます。

  1. // Replace existing to-do with modified to-do
  2. todoList.replaceChild(modifiedTodo, todoList.children[2]);
todo.html
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

DOM Screenshot 4

appendChild()insertBefore()、およびreplaceChild()の組み合わせにより、DOM内の任意の場所にノードと要素を挿入できます。

DOMからのノードの削除

これで、要素を作成し、それらをDOMに追加し、既存の要素を変更する方法がわかりました。 最後のステップは、DOMから既存のノードを削除する方法を学ぶことです。 子ノードはremoveChild()で親から削除でき、ノード自体はremove()で削除できます。

方法 説明
node.removeChild() 子ノードを削除します
node.remove() ノードを削除します

上記のやることの例を使用して、アイテムが完了した後にアイテムを削除したいと思います。 宿題が終わったら、リストの最後の子であるDo homeworkアイテムをremoveChild()で削除できます。

  1. todoList.removeChild(todoList.lastElementChild);
todo.html
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

DOM Screenshot 5

別の方法は、ノードで直接remove()メソッドを使用して、ノード自体を削除することです。

  1. // Remove second element child from todoList
  2. todoList.children[1].remove();
todo.html
<ul>
  <li>Pay bills</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

DOM Screenshot 6

removeChild()remove()の間で、DOMから任意のノードを削除できます。 DOMから子要素を削除するために表示される別の方法は、親要素のinnerHTMLプロパティを空の文字列("")に設定することです。 これはあまり明確ではないため、推奨される方法ではありませんが、既存のコードで表示される場合があります。

結論

このチュートリアルでは、JavaScriptを使用して新しいノードと要素を作成し、それらをDOMに挿入し、既存のノードと要素を置き換えて削除する方法を学びました。

DOMシリーズの理解のこの時点で、DOM内の任意の要素にアクセスし、DOM内の任意のノードをウォークスルーし、DOM自体を変更する方法を理解しています。 これで、JavaScriptを使用して基本的なフロントエンドWebアプリを作成することに自信を持つことができます。