エレメントの取得方法
web ページのエレメント(要素)の取得方法についてを網羅した解説です。
簡易な解説はエレメントの取得・追加・移動・削除
を参照してください。
エレメントの取得には、getElementsByClassName()、getElementById()、getElementsByName()、getElementsByTagName()、getElementsByTagNameNS()、.querySelector() 、.querySelectorAll() といったメソッドがあります。
var element_obj = document.getElementById('example');
他にも Window や Document のプロパティから取得する方法や、Event オブジェクトのプロパティから取得する方法があります。
エレメントには id、name、class といった属性があります。属性の取得については Element のプロパティとメソッドを参照してください。
注意点について
エレメントの取得、追加、移動、削除での注意点があります。同じエレメントでありながら、Node、Element、HTMLElement といった起因により思ってもいないエラーになることがあります。
エレメントの取得、追加、移動、削除は、Node、Element、HTMLElement のいずれかのメソッドを利用します。
その際に、引数や返り値が Node、Element、HTMLElement、NodeList、HTMLCollection の違いに気づかないことがあります。
最新のブラウザはあまりこれらの違いは気にする必要がなくなっていますが、たまにエラーがこれらの違いによって発生します。
メソッドからエレメントの取得
web ページを構成するエレメントの取得には Window や Document のプロパティやメソッドから取得する方法があります。
よく利用されるのは、Window オブジェクトから Document オブジェクトを取得し、ドキュメント中のエレメントを取得する方法です。
var element_obj = document.getElementById('Example');
上記の document は window を省略しており、window.document
と記述することもできます。
window 部分は、<iframe> を利用した親子間の Window では利用しますので理解しておいた方がよいでしょう。(「iframe タグエレメント」参照)
メソッドからエレメントを取得
document オブジェクトのメソッドからエレメントを取得する方法には以下があります。
メソッド | 概要 |
---|---|
.getElementsByClassName() | class 名をもつエレメントのリスト、 HTMLCollection を返す |
.getElementById() | id 名をもつエレメントを返す |
.getElementsByName() | name 名をもつエレメントリスト、NodeList を返す |
.getElementsByTagName() | 指定したタグエレメントのリスト、 HTMLCollection を返す |
.getElementsByTagNameNS() | XML。指定した名前空間をもつエレメントのリスト、 NodeList を返す |
.querySelector() | 引数のセレクターに一致する最初の Node を返す |
.querySelectorAll() | 引数のセレクターに一致する NodeList を返す |
.getElementsByClassName() と .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");
querySelectorAll() メソッド
querySelectorAll() メソッドの返り値はオブジェクトのリスト NodeList です。セレクターと同じ指定方法が利用できます。
var list_element = element.querySelectorAll("input[type='text']");
プロパティからエレメントを取得
Document プロパティ
Document のプロパティから直接 web ページのエレメントを取得できます。プロパティから取得できるエレメントには以下があります。
プロパティ | 概要 |
---|---|
.links | ハイパーリンク <a> のリスト HTMLCollection の取得 |
.body | <body>のオブジェクトハンドラー |
.embeds | <embed>のリスト HTMLCollection を取得 |
.forms | <form> エレメントのリスト HTMLCollection の取得 |
.fullscreenElement | 全画面モードで表示されているエレメントの取得 |
.head | <head>エレメントの取得 |
.documentElement | Documentの直下の子エレメント。通常は<html> |
.images | <img>のリスト HTMLCollection を取得 |
.scripts | スクリプト、 <script> エレメントのリストを HTMLCollection で取得 |
.title | <title>の値であるテキストの取得と設定 |
.styleSheets | スタイルシートのリスト、StyleSheetList を取得 |
var list_element = document.forms;
個々の <form> エレメントを取得するには、リストのインデックスを利用する方法があります。
var element_form = document.forms[0];
Element プロパティ
Element のプロパティにもエレメントを取得するプロパティが用意されています。相対的な関係にあるエレメントが対象のようです。
プロパティ | 概要 |
---|---|
.children | 子エレメントを返す |
.firstElementChild | 最初の子エレメント |
.lastElementChild | 子エレメントの中で最後のエレメント |
.nextElementSibling | 直後の兄弟エレメント。Element 型 |
Node プロパティ
Node プロパティにはエレメントを取得する手段が用意されており、このインターフェイスを継承している Element、HTMLElement 以降で使用することができます。
以下のプロパティの方がよく使われています。
プロパティ | 概要 |
---|---|
.childNodes | 現在の子孫 NodeList を返す。変更があれば更新される |
.firstChild | 最初の子 Node |
.lastChild | 最後の子 Node |
.nextSibling | 次の階層の Node |
.parentNode | 親の Node。最上位ならnulle |
.parentElement | 親の Element。親が Element ではない場合はnull |
children プロパティ
var list_element = document.getElementById('Example').children;
.children プロパティは子エレメントをリスト HTMLCollection で返します。
parentElement プロパティ
var element_obj = document.getElementById('Example').parentElement;
.parentElement プロパティは親が Element ではない場合は null を返します。
innerHTML、outerHTML
Element の innerHTML を使用してエレメントの内容を HTML テキストで取得することもできます。
document.getElementById('Example').innerHTML = "<p>テスト用の段落を作成しました。</p>";
innerHTML に値を設定することでエレメントの置き換えをすることもできますが、動作が不安定である場合があり注意が必要です。
iframe タグエレメント
番外ですが、<iframe> エレメント内の Window から親 Document を取得するには、parent.document を使用します。
var parent_document = parent.document;
window.parent.document と記述することもできます。
関連するプロパティとメソッド
エレメントの取得、追加、移動、削除において関連するプロパティとメソッドには以下があります。
プロパティ
プロパティ | 概要 |
---|---|
Node | |
.nextSibling | 次の階層の Node |
.nodeName | Node 名の取得 |
.previousSibling | 上の階層のNode |
Element | |
.childElementCount | 子エレメントの数 |
.children | 子エレメントを返す |
.firstElementChild | 最初の子エレメント |
.lastElementChild | 子エレメントの中で最後のエレメント |
メソッド
関連メソッド | 概要 |
---|---|
.cloneNode() | Node を複製 |
.compareDocumentPosition() | ノードの相対的な位置 |
.contains() | 引数の Node が子孫か否か Boolean 型 |
.getBoxQuads() | Node の CSS において関連する Node をリストで返す |
.getRootNode() | Node のルート Node を返す |
.hasChildNodes() | 子 Node を持っているか Boolean 型 |
.isEqualNode() | 指定した Node が同じ Node か否か Boolean 型 |
.isSameNode() | 指定した Node が同じ Node か否か Boolean 型 |
.normalize() | 全てのテキスト Node を削除 |
エレメントの作成、移動、削除はエレメントの作成について
を参照してください。