完全無料のJavaScript学習講座 10日目：DOM要素の追加、削除、変更

今日の授業では、ウェブページ上でDOM要素の追加、削除、変更を行う方法を学びます。

これらのスキルを身につけることで、ウェブページの動的な操作が可能になり、アコーディオンメニューやSNSのいいねボタンなどの実装ができるようになります。

DOM要素の追加、削除、変更のデモ

ここはメッセージです。

ウェブサイトでの使用場面

クリックすると内容が表示され、再度クリックすると内容が非表示になるメニューです。

DOM要素の追加・削除を用いて、クリック時に内容を表示する要素を追加し、再度クリックで要素を削除します。

ユーザーがいいねボタンをクリックすると、いいねの数が増える表示が変更されます。

再度クリックで、いいねの数が減る表示に変更します。DOM要素の変更を利用して、いいねの数の表示を更新します。

もちろん他にも色々ありますし、多くの場所で使われていますが、動作的にわかりやすいのはこの2つかなと思います。

新しい要素を作成するには、createElementメソッドを使います。

例えば、新しい<p>タグを作るには、以下のように書きます。

// 新しい<p>タグを作成
const newParagraph = document.createElement("p");

新しく作成した要素にテキストを追加するには、textContentプロパティを使います。

// 新しい要素（newParagraph）にテキストを追加
newParagraph.textContent = "新しい文章です。";

最後に、新しい要素をページに追加するには、appendChildメソッドを使います。

// 要素を追加する対象の要素を取得
const container = document.getElementById("container");

// 新しい要素をページに追加
container.appendChild(newParagraph);

要素を削除するには、removeChildメソッドを使います。親要素から子要素を削除するように書きます。

// 削除する要素を取得
const target = document.getElementById("target");

// 親要素から子要素（target）を削除
target.parentNode.removeChild(target);

要素の中のテキストを変更するには、textContentプロパティを使います。

// テキストを変更する要素を取得
const message = document.getElementById("message");

// 要素の中のテキストを変更
message.textContent = "変更されたメッセージです。";

今日の授業では、ウェブページ上の要素を操作する方法について学びました。

DOM要素の追加、DOM要素の削除、DOM要素の変更、これら3つはウェブサイト上の至る所で使われています。

今日の内容を学んだことで、ウェブページの構造や内容をダイナミックに変更する方法と、実際にごく簡単なウェブアプリケーションを作成できるようになったと思います。

何度か実践することで、どのコードがどの要素に結びついているか等、プログラム一つ一つの結びつきと動きもわかるようになりますよ。

よかったらシェアしてね！