JavaScript HTML DOM エレメント
- 前のページ DOM ドキュメント
- 次のページ DOM HTML
この章では、HTMLページ内のHTML要素の検索とアクセス方法について説明します。
HTML要素の検索
通常、JavaScriptを使用してHTML要素を操作する必要があります。
この目的を達成するために、まずこれらの要素を見つける必要があります。このタスクを完了するための方法はいくつかあります：
- idで HTML 要素を検索する方法
- タグ名で HTML 要素を検索する方法
- CSS 选择子で HTML 要素を検索する方法
- CSS 选择子で HTML 要素を検索する方法
- HTML オブジェクトコレクションで HTML 要素を検索する方法
idで HTML 要素を検索する方法
DOM 内で HTML 要素を検索する最も簡単な方法は、要素の id を使用することです。
この例では id="intro" の要素を検索します：
インスタンス
var myElement = document.getElementById("intro");
要素が見つかった場合、このメソッドはオブジェクトとしてその要素を返します（myElement 内で）。
要素が見つからない場合、myElement には null。
タグ名で HTML 要素を検索する方法
この例ではすべての <p> 要素：
インスタンス
var x = document.getElementsByTagName("p");
この例では id="main" の要素を検索し、その「main」内のすべての <p> 要素：
インスタンス
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
CSS 选择子で HTML 要素を検索する方法
同じクラス名を持つすべての HTML 要素を見つける場合は、 getElementsByClassName()。
この例では class="intro" を含むすべての要素のリストが返されます：
インスタンス
var x = document.getElementsByClassName("intro");
Internet Explorer 8 およびそれ以前のバージョンには適用されません。
CSS 选择子で HTML 要素を検索する方法
指定された CSS 选择子（id、クラス名、タイプ、属性、属性値など）に一致するすべての HTML 要素を検索する必要がある場合は、 querySelectorAll() メソッドが返されます。
この例では class="intro" のすべての <p> 要素リスト：
インスタンス
var x = document.querySelectorAll("p.intro");
querySelectorAll() Internet Explorer 8 およびそれ以前のバージョンには適用されません。
HTML オブジェクトセレクタを使用して HTML オブジェクトを検索します
この例では、id="frm1" の form オブジェクトを forms コレクションから検索し、すべての要素値を表示します：
インスタンス
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
以下の HTML オブジェクト（およびオブジェクトのコレクション）もアクセス可能です：
- 前のページ DOM ドキュメント
- 次のページ DOM HTML
