【JavaScript】要素取得の色々メモ(getElement○○○)

こんにちは。
本日はJavaScriptメモです。

概要

JavaScriptで要素の取得方法っていくつかありますよね。
それぞれがどのような要素を取得できるの調査。

本記事で使用するテンプレートは以下です。

<div id="div1" class="div-class1">
    <input type="text" id="text1" class="text-class1">
    <input type="text" id="text2" class="text-class1">
    <input type="text" id="text3" class="text-class1">
    <div id="div2" class="div-style2">
        <input type="text" id="text4" class="text-class1 text-class2">
        <input type="text" id="text5" class="text-class1 text-class2">
    </div>

    <input type="button" value="Button">
</div>

getElementById

見たとおり、idを指定して要素を取得します。

div1の要素を取得したい場合は以下です。

document.getElementById('div1')

存在しないidを指定した場合は、nullとなります。

getElementsByClassName

クラス名から要素を取得します。
こちらは、getElementByIdと異なり複数の要素が取得できます。
なので、取得した要素を使用する場合は、インデックスを指定します。

classにtext-class1が指定されている要素を取得しましょう。

document.getElementsByClassName('text-class1')

上記を実行すると5件取得できます。
最初の要素を取得したい場合は以下のようにインデックスを指定します。

document.getElementsByClassName('text-class1')[0]

存在しないクラスを指定してインデックス指定するとundefinedとなります。

getElementsByClassNameは、特定の要素に対しても実行できます。 例えば、div2の配下の要素だけ取得する場合は、以下のようにできます。

const div2 = document.getElementById('div2')
div2.getElementsByClassName('text-class1')

div2要素配下から取得するので、結果は2件となります。

getElementsByTagName

タグ名から要素を取得します。
こちらは、getElementsByClassNameと同様で複数の要素が取得できます。

inputタグの要素を取得しましょう。

document.getElementsByTagName('input')

上記を実行すると6件取得できます。
getElementsByClassNameと同様で、インデックスを指定して
特定の要素を取得します。

document.getElementsByTagName('input')[0]

存在しないタグを指定してインデックス指定するとundefinedとなります。

こちらも、特定の要素配下の検索が可能です。
div2の配下の要素だけ取得する場合は、以下のようにできます。

const div2 = document.getElementById('div2')
div2.getElementsByTagName('input')

上記を実行すると2件取得できます。

番外編 parentElement

特定の要素の親要素を取得する方法です。

const div2 = document.getElementById('div2')
div2.parentElement

上記で親要素であるdiv1が取得できます。

以上です。