エレメントの取得・追加・移動・削除
web ページのエレメント（要素）の取得、追加、移動、削除の方法についての解説です。web ページの要素を操作する方法になります。
var element_obj = document.getElementById('example');
エレメントの取得に関しては以下のエレメントの取得
を参照してください。
エレメントの取得、追加、移動、削除において注意点があります。同じエレメントでありながら、Node、Element、HTMLElement といった起因により思ってもいないエラーになることがあります。
引数や返り値に Node、Element、HTMLElement、NodeList、HTMLCollection の違いがありこのことが原因でエラーが起こることがあるのです。
最新のブラウザはあまりこれらの違いは気にする必要がなくなっていますが、たまにエラーがこれらの違いによって発生します。
エレメントの取得
エレメントを取得する方法には、メソッドまたはプロパティによる方法があります。まずメソッドによるエレメントの取得について触れます。
メソッドからエレメントを取得
よく利用されるのは、Document オブジェクトを取得し、メソッドによってドキュメント中のエレメントを取得する方法です。
var element_obj = document.getElementById('Example');
上記の document は window を省略しており、window.document
と記述することもできます。
以下の .getElementsByTagName()、.querySelector()、.querySelectorAll() はエレメントから子エレメントを取得する場合にも使用できます。
getElementsByTagName() メソッド
getElementsByTagName() メソッドの返り値はエレメントの配列 HTMLCollection です。
var element = document.getElementById('Example');
var list_element = element.getElementsByTagName("p");
querySelector() メソッド
querySelector() メソッドの返り値は該当する最初の Element オブジェクトです。セレクターと同じ指定方法が利用できます。
var element_obj = element.querySelector("div.example p#content");
上記の例は class="example" をもつ <div> エレメント以下の id="content" である <p> エレメントを対象にしています。
querySelectorAll() メソッド
querySelectorAll() メソッドの返り値はオブジェクトのリスト NodeList です。セレクターと同じ指定方法が利用できます。
var list_element = element.querySelectorAll("input[type='text']");
プロパティからエレメントを取得
プロパティからエレメントを取得する方法の中でよく使われる、または利用しやすいものだけを上げます。
Element または Node のプロパティからエレメントを取得します。
var list_element = document.getElementById('Example').children;
.children プロパティは子エレメントをリスト HTMLCollection で返します。
var element_obj = document.getElementById('Example').parentElement;
.parentElement プロパティは親が Element ではない場合は null を返します。
Node プロパティ
その他でよく使われる以下のような Node プロパティがあります。
| プロパティ | 概要 |
|---|---|
| .childNodes | 現在の子孫 NodeList を返す。変更があれば更新される |
| .parentNode | 親の Node。最上位なら null |
他にも Window や Document のプロパティから取得する方法や、Event オブジェクトのプロパティから取得する方法があります。
詳しくはエレメントの取得方法
ページを参照してください。
エレメントの追加
エレメントの追加によってそのエレメントを表示するは以下のように、document.createElement() メソッドで新規にエレメントを作成し、.appendChild() メソッドなどによって web ページに追加する必要があります。
createElement() メソッドでエレメントの新規作成 ↓ appendChild() メソッドなどでエレメントを追加 ↓ 表示される
注意点として、エレメントの追加は常に子エレメントの最後尾に追加されます。
まずはエレメントの新規作成を document.createElement() メソッドで行います。
var element_obj = document.createElement('p',{id:'id_',class:'css_'});
element_obj.innerHTML = "Example Text"
document.createElement() メソッドで作成されたエレメントはドキュメント上にありますが表示はされていません。
既存のエレメントに包括することで表示されます。
包括には以下のような .appendChild() メソッドを使用します。このメソッドによってまず指定エレメントの最後尾に追加、そして表示されます。
document.getElementById('container').appendChild( element_obj );
.append() メソッドでもエレメントを追加することができます。.append() メソッドは複数の Node オブジェクトまたはテキストが引数として使用できます。
document.getElementById('container').append(' Hello! ');
最後尾に追加したエレメントは以下の .insertBefore() メソッドで移動することができます。
また、エレメントの追加に関して詳しくはエレメントの作成について エレメントの新規作成
を参照してください。
エレメントの移動
移動
追加したエレメントは希望する箇所に表示されるとは限りません。任意の箇所に表示したい場合は以下のメソッドを使用して位置を移動する必要があります。
以下の.insertBefore() は、第１引数の前に第２引数のエレメントを追加します。
document.getElementById('over').insertBefore( document.getElementById('after_element'), document.getElementById('inset_element') );
.insertBefore() メソッドは第２引数を既存のエレメントに対して実行すると移動になります。
Document と Element、 どちらのオブジェクトでも使用できます。
置換
エレメントの置き換えには、.replaceChild() メソッドを使用します。
document.getElementById('over').replaceChild( document.getElementById('inset_element'), document.getElementById('old_element') );
上記は Node オブジェクトのメソッドですが、HTML の各タグエレメントは HTMLElement を通してそのプロパティとメソッドを継承していますので上記のメソッドを利用することができます。
詳しくはエレメントの作成について エレメントの移動
を参照してください。
エレメントの削除
エレメントの削除には以下の .removeChild() メソッドを使用します。
document.getElementById('over').removeChild( document.getElementById('example') );
.removeChild() メソッドは Document と Element オブジェクト、どちらでも使用できます。
innerHTML、outerHTML
innerHTML、outerHTML プロパティに以下のような何もない文字列を設定することでエレメントを削除することもできます。
document.getElementById('example').innerHTML = "";
詳しくはエレメントの作成について エレメントの削除
を参照してください。
関連するプロパティ
エレメントの取得、追加、移動、削除において関連するプロパティには以下があります。
プロパティ
| プロパティ | 概要 |
|---|---|
| Node | |
| .nextSibling | 次の階層のNode |
| .nodeName | Node 名の取得 |
| .previousSibling | 上の階層のNode |
| Element | |
| .childElementCount | 子エレメントの数 |
| .children | 子エレメントを返す |
| .firstElementChild | 最初の子エレメント |
| .lastElementChild | 子エレメントの中で最後のエレメント |