JS: Wie überprüft man korrekt ob ein Element im DOM existiert

In Javascript gibt es 4 Methoden um auf ein Element im DOM zuzugreifen:

1. document.getElementById()
2. document.querySelector()
3. document.querySelectorAll()
4. document.getElementByClassName()

Die ersten 2 Methoden geben nur ein Element zurück und geben null zurück wenn kein Element gefunden wird. Folglich muss bei diesen Methoden gegen null geprüft werden ob kein Element existiert. z.B.:

 if (document.getElementById('element-id') !== null) { ... }

document.querySelectorAll() gibt eine Nodelist mit dem Typ „Array“ und document.getElementByClassName() gibt eine HTMLCollection ebenfalls mit dem Variablentyp „Array“ zurück. Hier muss bei beiden mit length > 0 geprüft werden ob kein Element existiert. z.B.:

 if (document.querySelectorAll('.list-items').length > 0) { ... }

Quellen und weitere Informationen:

• https://dev.to/lavary/how-to-check-if-an-element-exists-in-javascript-with-examples-4mpb