JavaScript で DOM に要素が存在するかどうかをチェックする

Moataz Farid 2023年1月30日 JavaScript JavaScript DOM
  1. DOM の要素の存在を調べるには getElementById() を使用する
  2. getElementsByClassName を用いて DOM 内に要素が存在するかどうかを調べる
  3. DOM の要素の存在を調べるには、getElementsByName を用いる
  4. getElementsByTagName を用いて DOM 内に要素が存在するかどうかを調べる
  5. 可視の DOM に要素が存在するかどうかを調べるには contains() を用いる
JavaScript で DOM に要素が存在するかどうかをチェックする

この記事では、DOM 内に要素が存在するかどうかを別のメソッドで調べる方法を説明します。

DOM の要素の存在を調べるには getElementById() を使用する

要素の Id を用いて DOM に要素が存在するかどうかを調べるには、関数 getElementById を用いることができます。以下の例では、要素 <a id="Anchor Id" href="#">Click Here</a> が DOM に存在することを確認します。

<html>
    <body>
        <a id="Anchor Id" href="#">Click Here</a>
        <script>
            var testData = document.getElementById("Anchor Id");
            console.log(testData);
        </script>
    </body>
</html>

出力：

<a id="Anchor Id" href="#">Click Here</a>

返された要素ではなくブール値として値を返したい場合は、document.getElementById("Anchor Id"); の前に !! を追加できます。

<html>
    <body>
        <a id="Anchor Id" href="#">Click Here</a>
        <script>
            var testData = !!document.getElementById("Anchor Id");
            console.log("Is Not null?",testData);
        </script>
    </body>
</html>

出力：

Is Not null? true

getElementsByClassName を用いて DOM 内に要素が存在するかどうかを調べる

関数 getElementById() を用いて Id を用いて要素を検索するのと同様に、getElementsByClassName()、getElementsByName()、getElementsByTagName() のように、条件を変えて同じ操作を行う関数も多数あります。

関数 getElementsByClassName() は、クラス名を用いて DOM 内の要素を検索するために使用します。クラス名の値の例としては、要素 <a class="ClassExample"></a> の中の ClassExample があります。これは、要素があれば 1つ以上の要素を返し、要素が存在しなければ null を返します。

以下に、getElementByClassName() 関数の例を見てみましょう。

<html>
    <body>
        <a class="ClassExample" href="#">Click Here for the class example </a>
        <script>
            var classname = document.getElementsByClassName("ClassExample");
            var classnameExists = !!document.getElementsByClassName("ClassExample");

            console.log("Element :",classname);
            console.log("Is Not null ? ",classnameExists);
        </script>
    </body>
</html>

出力：

Element : HTMLCollection [a.ClassExample]
Is Not null ?  true

関数 getElementsByClassName() の前に記号 !!を使用して、結果をブール値に型キャストすることもできます。ブール値では、値がある場合は true を返し、null を返す場合は false を返します。

DOM の要素の存在を調べるには、getElementsByName を用いる

関数 getElementsByName() を用いて DOM 内の任意の要素をその名前で検索し、その要素の Name は ElementNameHolder の値を持ちます。以下の例を見てみましょう。

<html>
    <body>
        <a class="ClassExample" name="ElementNameHolder" href="#">Click Here for the class example </a>
        <script>
            var EleName = document.getElementsByName("ElementNameHolder");
            var elementNameExists = !!document.getElementsByName("ElementNameHolder");

            console.log("Element :",EleName);
            console.log("Is Not null ? ",elementNameExists);
        </script>
    </body>
</html>

出力：

Element : NodeList [a]
Is Not null ? true

getElementsByTagName を用いて DOM 内に要素が存在するかどうかを調べる

関数 getElementsByTagName() は、指定された tagName を持つすべての要素を DOM から返します。この関数の戻り値は 1つ以上の要素か、要素が見つからなければ null です。

以下の例は、必要な要素が DOM に存在するかどうかを調べる方法を示しています。

<html>
    <body>
        
        <exampleTag>
            <a name="ElementNameHolder1" href="#">Click Here for the tag name example 1 </a>
        </exampleTag>
        
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Click Here for the tag name example 2 </a>
        </exampleTag>
        
        <script>
            var EleTagName = document.getElementsByTagName("exampleTag");
            
            console.log("Element 1 :",EleTagName[0].innerHTML);
            console.log("Element 2 :",EleTagName[1].innerHTML);
        </script>
    </body>
</html>

出力：

Element 1 : 
            <a name="ElementNameHolder1" href="#">Click Here for the tag name example 1 </a>
        
Element 2 : 
            <a name="ElementNameHolder2" href="#">Click Here for the tag name example 2 </a>

可視の DOM に要素が存在するかどうかを調べるには contains() を用いる

表示されている DOM の中に要素が存在することを確認したい場合は、document.body.contains() を用いれば、第 1 引数に送った要素を検索して表示されている DOM の中から探すことができます。

関数 contains() は一つのノードしか受け取らないので、関数 document.getElementsByTagName や document.getElementsByName のいずれかを使ってノードを取得する際には、選択基準に合致する要素をすべて返すので、送信する要素を一つだけ選択する必要があります。

<html>
    <body>
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 1</a>
            <a id="ElementId1" href="#">Tag, Name, Id in visible DOM example 2</a>
        </exampleTag>
        
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 3</a>
            <a id="ElementId2" href="#">Tag, Name, Id in visible DOM example 4</a>
        </exampleTag>
        
        <script>
            var EleTagName = document.getElementsByTagName("exampleTag");

            let myVar1 = document.body.contains(document.getElementsByTagName("exampleTag")[0]);
            let myVar2 = document.body.contains(document.getElementsByName("ElementNameHolder2")[0]);
            let myVar3 = document.body.contains(document.getElementById("ElementId2"));
            console.log("Element 1 :",EleTagName[0].innerHTML);
            console.log("Element 2 :",EleTagName[1].innerHTML);
        </script>
    </body>
</html>

Element 1 : 
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 1</a>
            <a id="ElementId1" href="#">Tag, Name, Id in visible DOM example 2</a>
        
Element 2 : 
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 3</a>
            <a id="ElementId2" href="#">Tag, Name, Id in visible DOM example 4</a>
チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe

関連記事 - JavaScript DOM