取得した要素を変更する

innerText = "さようなら"の部分で、取得した要素の中身のテキストを「さようなら」に変更しています。

その変更を画面に反映する

これで変更が画面に反映されます。特別なことは何もする必要はありません。

もっと便利なDOM操作

DOM操作の基本を学んだところで、もっと便利な方法も少し紹介しておきます。

新しい要素を追加する

例えば、新しい

タグを追加したいときは、次のようにします。

const newParagraph = document.createElement("p");
newParagraph.innerText = "新しい段落です";
document.body.appendChild(newParagraph);

要素を削除する

特定の要素を削除したいときは、次のようにします。

const elementToRemove = document.getElementById("oldElement");
elementToRemove.parentNode.removeChild(elementToRemove);

まとめ

この記事では、JavaScriptでDOMを操作する基本の方法について学びました。基本の流れは「要素を取得」「要素を変更」「画面に反映」の3ステップです。さらに、新しい要素を追加したり、要素を削除したりする方法も紹介しました。