JavaScriptでの要素の取得や追加、削除の方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptでの要素の取得や追加、削除の方法について、それぞれの場合に分け、簡単に解説していきます。

要素の取得方法

JavaScriptで要素を取得するには、DocumentのgetElement(s)系のメソッドを使います。

スペリングを確認して、Elementsであれば配列、Elementであれば一つの要素が返されることに留意します。

document.getElemetById("email"); // IDで単数の要素を取得
document.getElementsByClassName("form-control"); // クラス名で複数の要素を取得
document.getElementsByName("email"); // name属性の値で複数の要素を取得
document.getElementsByTagName("input"); // タグ名で複数の要素を取得

上記のコードは、各手段で要素を取得するコードであり、getElementByIdを除き、全て配列での取得となります。

要素の追加方法

JavaScriptで要素を追加するには、追加の際に基準となる要素も一緒に決める必要があります。

なぜなら、要素の追加は、基準となる要素の前後の要素や子要素としてしか行うことができないからです。

var div = document.createElement("div"); // 追加する要素を生成
var element = document.getElementById("hoge"); // 追加の際に基準となる要素を取得

element.appendChild(element); // 基準となる要素の最後の子要素として追加
element.insertBefore(div, element.firstChild); // 基準となる要素の最初の子要素として追加
element.insertBefore(div, element); // 基準となる要素の直前の要素として追加
element.insertBefore(div, element.nextSibling); // 基準となる要素の直後の要素として追加

上記のコードは、基準となる要素に対し、その要素の前後の要素や子要素として直前、直後に追加するコードになります。

要素の削除方法

JavaScriptには、ある要素を直接、削除するような全ブラウザで対応しているメソッドがありません。

そのため、削除の際は、一旦削除対象の要素の親要素のノードからremoveChildメソッドを実行する必要があります。

var element = document.getElementById("hoge"); // 削除する要素を取得
element.parentNode.removeChild(element); // 自分を削除

上記のコードは、削除対象の要素をelementとし、parentNodeプロパティで親要素を取得した後、そのノードからremoveChildメソッドで削除対象の要素を削除するコードです。