Prüfen, ob Element im DOM in JavaScript vorhanden ist

  2. How-To's
  3. JavaScript-Anleitungen
  4. Prüfen, ob Element im DOM in JavaScript …
Moataz Farid 30 Januar 2023
JavaScript JavaScript DOM
  1. Verwenden Sie die Funktion getElementById(), um das Vorhandensein eines Elements im DOM zu prüfen
  2. Verwenden Sie getElementsByClassName, um die Existenz eines Elements im DOM zu prüfen
  3. Verwenden Sie getElementsByName, um das Vorhandensein eines Elements im DOM zu prüfen
  4. Verwenden Sie getElementsByTagName, um die Existenz eines Elements im DOM zu prüfen
  5. Verwenden Sie contains(), um die Existenz eines Elements im sichtbaren DOM zu prüfen
Prüfen, ob Element im DOM in JavaScript vorhanden ist

In diesem Artikel wird erklärt, wie wir die Existenz eines Elements im DOM mit verschiedenen Methoden überprüfen können.

Verwenden Sie die Funktion getElementById(), um das Vorhandensein eines Elements im DOM zu prüfen

Wir können die Funktion getElementById verwenden, um zu überprüfen, ob ein Element im DOM existiert, indem wir die Id des Elements verwenden. Im folgenden Beispiel prüfen wir, ob das Element <a id="Anchor Id" href="#">Click Here</a> im DOM existiert.

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

Ausgabe:

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

Wenn wir anstelle des zurückgegebenen Elements den Wert als Boolean zurückgeben wollen, können wir ein !! vor unser document.getElementById("Anchor Id"); setzen.

<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>

Ausgabe:

Is Not null? true

Verwenden Sie getElementsByClassName, um die Existenz eines Elements im DOM zu prüfen

Ähnlich wie wir die Funktion getElementById() verwenden, um das Element anhand seiner Id zu finden, haben wir auch viele andere Funktionen, die die gleiche Operation anhand bestimmter Kriterien durchführen, wie getElementsByClassName(), getElementsByName() und getElementsByTagName().

Die Funktion getElementsByClassName() wird verwendet, um das Element im DOM anhand seines Klassennamens zu finden. Ein Beispiel für den Wert des Klassennamens ist ClassExample im Element <a class="ClassExample"></a>. Es wird ein oder mehrere Elemente zurückgegeben, wenn ein Element gefunden wird oder null, wenn das Element nicht existiert.

Lassen Sie uns das folgende Beispiel der Funktion getElementByClassName() betrachten:

<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>

Ausgabe:

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

Wir können auch das Zeichen !! vor der Funktion getElementsByClassName() verwenden, um das Ergebnis in einen booleschen Wert umzuwandeln, wobei true zurückgegeben wird, wenn es einen Wert hat, und false, wenn es null zurückgibt.

Verwenden Sie getElementsByName, um das Vorhandensein eines Elements im DOM zu prüfen

Die Funktion getElementsByName() wird verwendet, um ein beliebiges Element in DOM anhand seines Namens zu finden. Der Name des Elements hat den Wert von ElementNameHolder im Element <a name="ElementNameHolder"></a>. Lassen Sie uns das folgende Beispiel sehen:

<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>

Ausgabe:

Element : NodeList [a]
Is Not null ? true

Verwenden Sie getElementsByTagName, um die Existenz eines Elements im DOM zu prüfen

Die Funktion getElementsByTagName() kann alle Elemente mit dem angegebenen tagName in DOM zurückgeben. Der Rückgabewert der Funktion kann ein oder mehrere Elemente sein oder null, wenn kein Element gefunden wird.

Das folgende Beispiel zeigt, wie geprüft werden kann, ob das gewünschte Element in DOM vorhanden ist oder nicht.

<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>

Ausgabe:

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>

Verwenden Sie contains(), um die Existenz eines Elements im sichtbaren DOM zu prüfen

Wenn wir die Existenz eines Elements im sichtbaren DOM überprüfen wollen, können wir document.body.contains() verwenden, das im sichtbaren DOM nach dem Element sucht, das wir in seinem ersten Argument senden.

Die Funktion contains() empfängt nur einen Knoten. Wenn wir also Knoten mit einer der Funktionen document.getElementsByTagName oder document.getElementsByName abrufen, müssen wir nur ein Element zum Senden auswählen, da diese Funktionen alle gefundenen Elemente zurückgeben, die den Auswahlkriterien entsprechen.

<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>

Verwandter Artikel - JavaScript DOM