エレメントの取得方法

注意点について

　エレメントの取得、追加、移動、削除での注意点があります。同じエレメントでありながら、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 タグエレメント」参照）

var element = document.getElementById('Example');
var list_element = element.getElementsByTagName("p");

var element_obj = element.querySelector("div.example p#content");

var list_element = element.querySelectorAll("input[type='text']");

var list_element = document.forms;

var element_form = document.forms[0];

var list_element = document.getElementById('Example').children;

var element_obj = document.getElementById('Example').parentElement;

document.getElementById('Example').innerHTML = "<p>テスト用の段落を作成しました。</p>";

iframe タグエレメント

　番外ですが、<iframe> エレメント内の Window から親 Document を取得するには、parent.document を使用します。

var parent_document = parent.document;

　window.parent.document と記述することもできます。

関連するプロパティとメソッド

　エレメントの取得、追加、移動、削除において関連するプロパティとメソッドには以下があります。

プロパティ

メソッド

　エレメントの作成、移動、削除はエレメントの作成についてを参照してください。