JavaScript HTMLDOM要素
このページでは、HTMLページでHTML要素を検索してアクセスする方法について説明します。
HTML要素の検索
多くの場合、JavaScriptでは、HTML要素を操作する必要があります。
そのためには、最初に要素を見つける必要があります。これを行うにはいくつかの方法があります。
- IDによるHTML要素の検索
- タグ名によるHTML要素の検索
- クラス名によるHTML要素の検索
- CSSセレクターによるHTML要素の検索
- HTMLオブジェクトコレクションによるHTML要素の検索
IDによるHTML要素の検索
DOMでHTML要素を見つける最も簡単な方法は、要素IDを使用することです。
この例では、次の要素を検索しますid="intro"。
例
const element = document.getElementById("intro");
要素が見つかった場合、メソッドはその要素をオブジェクトとして（要素内で）返します。
要素が見つからない場合、要素には。が含まれますnull。
タグ名によるHTML要素の検索
<p>この例では、すべての要素を検索します。
例
const element = document.getElementsByTagName("p");
この例では、で要素を検索し、次に：内id="main"のすべての<p>要素を検索します。"main"
例
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
クラス名によるHTML要素の検索
同じクラス名のすべてのHTML要素を検索する場合は、を使用します
getElementsByClassName()。
この例では、。を含むすべての要素のリストを返しますclass="intro"。
例
const x = document.getElementsByClassName("intro");
CSSセレクターによるHTML要素の検索
指定されたCSSセレクター（ID、クラス名、タイプ、属性、属性の値など）に一致するすべてのHTML要素を検索する場合は、このquerySelectorAll()メソッドを使用します。
<p>この例では、。を含むすべての要素のリストを返しますclass="intro"。
例
const x = document.querySelectorAll("p.intro");
HTMLオブジェクトコレクションによるHTML要素の検索
この例では、formsコレクション内のでform要素を検索し、id="frm1"すべての要素値を表示します。
例
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
次のHTMLオブジェクト（およびオブジェクトコレクション）にもアクセスできます。