DOMに変更を加える方法

提供：Dev Guides
移動先:案内、検索

序章

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

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.";

注：これは機能し、要素にコンテンツを追加する一般的な方法ですが、 [の使用に関連してクロスサイトスクリプティング（XSS）のリスクが発生する可能性があります。 X183X]メソッド。インラインJavaScriptを要素に追加できるため。 したがって、代わりに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でやることリストを作成しましょう。

todo.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要素が追加されていることがわかります。

todo.html 

<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つは追加される新しい子ノードで、もう1つは新しいノードの直後に続く兄弟ノードです。 つまり、次の兄弟ノードの前に新しいノードを挿入します。 これは、次の擬似コードのようになります。 

parentNode.insertBefore(newNode, nextSibling);

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

// Add new to-do to the beginning of the list
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>

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

ノードを置き換える方法を示すために、既存の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]);

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>

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

DOMからのノードの削除

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

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

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

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>

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

// Remove second element child from todoList
todoList.children[1].remove();

todo.html 

<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アプリを作成することに自信を持つことができます。

「https://www.finddevguides.com/index.php?title=DOMに変更を加える方法&oldid=101348」から取得
Powered by MediaWiki