目次
DOMの手続き操作
要素の取得
DOMを使用して、HTMLの要素を取得することができます。
例えば、id属性が"myElement"である要素を取得する場合は、以下のようにします。
// 要素を追加する場所を取得する
const myElement = document.getElementById("myElement");
要素の追加
DOMを使用して、HTMLの要素を追加することができます。
例えば、新しいp要素を作成し、その中にテキストを挿入する場合は、以下のようにします。
const newElement = document.createElement("p");
const textNode = document.createTextNode("新しいテキスト");
newElement.appendChild(textNode);
// 要素を追加する場所を取得する
const parentElement = document.getElementById("parent");
parentElement.appendChild(newElement);
属性の変更
DOMを使用して、HTMLの要素の属性を変更することができます。
例えば、img要素のsrc属性を変更する場合は、以下のようにします。
const myImage = document.getElementById("myImage");
myImage.src = "doraemon_image.jpg";
イベントの監視
DOMを使用して、HTMLの要素で発生するイベントを監視することができます。
例えば、クリックイベントを監視し、クリックされた場合にalertを表示する場合は、以下のようにします。
// 要素を追加する場所を取得する
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
alert("クリックされました");
});
要素の削除
DOMを使用して、HTMLの要素を削除することができます。
例えば、id属性が"myElement"である要素を削除する場合は、以下のようにします。
const myElement = document.getElementById("myElement");
myElement.parentNode.removeChild(myElement);
上記のように素のJavaScriptのDOM操作は正直言って、かなりめんどくさいです。
フレームワークが流行ったおかげで、素のJavaScriptを書く頻度は少なくなりました。
素のJavaScriptのDOM操作は、手続き操作
フレームワークのDOM操作は、宣言的操作
だからです。
筆者は初学者の頃から『要素の追加』に冗長さを感じて未だに慣れません。
一方でフレームワークの宣言的操作は、簡単に書けるのも魅力の１つです。
次回以降、その話を書きたいと思います。
