JavaScript HTML DOM 要素

❮ 前章へ 次章へ ❯

このページでは、HTML ページ内の HTML 要素の検索とアクセス方法について説明します。

HTML 要素の検索

JavaScriptを使用して HTML 要素を操作したい場合がよくあります。

そうするためには、最初に要素を見つけなければなりません。これを行う方法がいくつかのがあります：

id によるHTML要素の検索

DOM で HTML 要素を検索する最も簡単な方法は、要素 id を使用することです。

この例では、id="intro"の要素を検索します：

例

var myElement = document.getElementById("intro");
Try it Yourself »

要素が見つかった場合、メソッドは要素をオブジェクトとして返します（myElementに）。

要素が見つからなかった場合、myElementは null になります。

タグ名による HTML 要素の検索

この例では、すべての<p>要素が検索します：

例

var x = document.getElementsByTagName("p");
Try it Yourself »

この例では、id="main"の要素を検索して、次に"main"内のすべての<p>要素を検索ます：

例

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Try it Yourself »

クラス名によるHTML要素の検索

同じクラス名を持つすべてのHTML要素を検索するには、etElementsByClassName()を使用します。

この例では、class="intro"のすべての要素のリストを返します。

例

var x = document.getElementsByClassName("intro");
Try it Yourself »

Internet Explorer 8 以前のバージョンでは、クラス名で要素を検索することはできません。

CSSセレクタによるHTML要素の検索

指定したCSSセレクタ（id、クラス名、型、属性、属性の値など）と一致するすべてのHTML要素を検索するには、querySelectorAll()メソッドを使用します。

この例では、class="intro"のすべての<p>要素のリストを返します。

例

var x = document.querySelectorAll("p.intro");
Try it Yourself »

querySelectorAll() メソッドは、Internet Explorer 8以前のバージョンでは動作しません。

HTMLオブジェクトコレクションによるHTML要素の検索

この例では、フォームコレクション内のid="frm1"のフォーム要素を検索し、すべての要素の値を表示します：

例

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;
Try it Yourself »

次のHTMLオブジェクト（およびオブジェクト・コレクション）にもアクセス可能です：

練習問題による自己診断

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »


❮ 前章へ 次章へ ❯