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

HTML要素の検索

JavaScriptでは、HTML要素を操作したいことがよくあります。

そのためには、まず要素を見つける必要があります。これを行うにはいくつかの方法があります。

• IDによるHTML要素の検索
• タグ名によるHTML要素の検索
• クラス名によるHTML要素の検索
• CSSセレクターによるHTML要素の検索
• HTMLオブジェクトコレクションによるHTML要素の検索

IDによるHTML要素の検索

DOM内でHTML要素を見つける最も簡単な方法は、要素IDを使用することです。

この例では、id="intro"を持つすべての要素を検索します。

要素が見つかった場合、メソッドはその要素を(要素内の) オブジェクトとして返します。

要素が見つからない場合、要素にはnullが含まれます。

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

この例はすべての<p>要素を検索します。

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

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

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

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

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

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

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

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

この例では、formsコレクション内でid="frm1"のform要素を検索し、すべての要素の値を表示します。

次のHTMLオブジェクト(およびオブジェクトコレクション)にもアクセスできます。

• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title

:::form {autocomplete="off" spellcheck="false" #techis-exerciseform action="exercise_js.asp?filename=exercise_js_dom_html1" method="post" target="_blank"}