getElementByIdはdocumentオブジェクトのメソッドで、DOMツリーの中で一意なid属性を持つ要素（Element）のElementオブジェクトを取得することができます。
DOM（Document Object Model）はXMLやHTMLを扱うためのAPIで、現在W3CによりLevel1から4までが勧告されています（Level1以前のモデルは通称DOM Level 0またはレガシーDOMと呼ばれています）。
ツリー形式の階層構造を持つXMLやHTMLは、DOMツリーと呼ばれています。DOMツリーの一つひとつの構成要素はノードと呼ばれています。HTMLのDOMツリーの頂点がdocumentです。これらノードは全てNodeクラスのインスタンスです。
HTML文書のノードは、主に下記のように分類されます。例えば<h1>や<p>などのタグは要素ノード、タグ内のテキストはテキストノードに分類されます。
Element 要素ノード
Attr 属性ノード
Text テキストノード
Comment コメントノード
Document 文書ノード
getElementByIdメソッドは、一意に指定されたid属性を持つ要素ノードをElementオブジェクト（エレメントオブジェクト／要素オブジェクト）として取得します。下記のコードで言えば、7行目においてElementオブジェクトを取得し、objオブジェクトに格納しています。※一方pタグなど複数ある要素ノードをタグ名で取得できるgetElementsByTagNameメソッドなどは、HTMLCollectionオブジェクトを返します（『初めてのJavaScrip』第3版 p.310参照）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id = "test">テストします</div> <script> document.addEventListener('DOMContentLoaded', function(){ var obj = document.getElementById('test'); //エレメントオブジェクトを取得 function fnc1(){ obj.textContent = 'テスト完了'; } obj.addEventListener( 'click', fnc1, false ); },false); </script> |
関連ページ
getElementsByTagNameについて[HTMLCollection][ライブオブジェクト]
jQueryを実行する[jQuery3.x][jQueryオブジェクト][jQuery関数]
