5 einfache DOM Javascript Selector Methods im Überblick

In diesem Beitrag findest du fünf einfache DOM Javascript Selector Methods um verschiedene Elemente auszuwählen, damit du diese im Anschluss für deine Zwecke anpassen kannst.

Inhaltsverzeichnis

1) document.getElementById()

Wählt ein „String-Argument“ aus und gibt das eine Element mit der treffenden ID zurück.

var $specialItem = document.getElementById("special");

<body>
  <h1>Hallo Welt!</h1>
  <ul>
    <li id="special">List Item 1</li>
    <li class="fett">List Item 2</li>
    <li class="fett">List Item 3</li>
  </ul>
</body>

In diesem Beispiel wird das Element mit der ID „special“ ausgewählt. Hier ist es das erste Item in der Liste, also das „List Item 1.“

2) document.getElementsByClassName()

Wählt mehrere „String-Argumente“ aus und gibt eine Liste der Elemente mit den treffenden Klassen zurück.

var $specialItems = document.getElementsByClassName("fett");
console.log($specialItems[0]);

<body>
  <h1>Hallo Welt!</h1>
  <ul>
    <li id="special">List Item 1</li>
    <li class="fett">List Item 2</li>
    <li class="fett">List Item 3</li>
  </ul>
</body>

In diesem Beispiel werden die Elemente mit den CSS-Klassen „fett“ ausgewählt und das erste Element in der Javascript Console ausgegeben. Wenn du das [0] entfernst, dann kannst du dir alle Einträge anzeigen lassen. Hier wäre es dann statt nur dem zweiten Eintrag der Liste auch der dritte, da beide die CSS-Klasse „fett“ besitzen.

3) document.getElementsByTagName()

Gibt eine Liste mit allen Elementen eines bestimmten Tags wie <li> zurück.

var $specialItems = document.getElementsByTagName("li");
console.log($specialItems);

<body>
  <h1>Hallo Welt!</h1>
  <ul>
    <li id="special">List Item 1</li>
    <li class="fett">List Item 2</li>
    <li class="fett">List Item 3</li>
  </ul>
</body>

Mit diesem Javascript Selector im Beispiel werden alle Elemente des Tags <li> ausgewählt und in der Console ausgegeben. Hier wären es also List Item 1 bis 3.

4) document.querySelector()

Gibt das erste Element zurück, welches auf einen bestimmten CSS-Selektor trifft.

// Beispiel 1: ID
var $specialItem = document.querySelector("#special");

//Beispiel 2: CSS Klasse
var $specialItem = document.querySelector(".fett");

<body>
  <h1>Hallo Welt!</h1>
  <ul>
    <li id="special">List Item 1</li>
    <li class="fett">List Item 2</li>
    <li class="fett">List Item 3</li>
  </ul>
</body>

Mit dem Query Selector wird im ersten Beispiel die ID #special ausgewählt, was auf das List Item 1 zutrifft. Im zweiten Beispiel wird die CSS-Klasse .fett ausgewählt, was wiederum auf die List Items 2 und 3 zutrifft.

5) document.querySelectorAll()

Gibt eine Liste aller Elemente zurück. die zu einem bestimmten CSS-Selektor passen.

var $specialItems = document.querySelectorAll("li");

<body>
  <h1>Hallo Welt!</h1>
  <ul>
    <li id="special">List Item 1</li>
    <li class="fett">List Item 2</li>
    <li class="fett">List Item 3</li>
  </ul>
</body>

Dadurch wählst du in diesem Beispiel mit dem „Query Selector All“ alle li Elemente aus. Also List Item 1 bis 3.

Fazit

Alle diese Methoden liegen im Document Object. Deswegen kannst du verschiedene Elemente mit Methoden wie getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector() und querySelectorAll() auswählen.

Das könnte dich auch interessieren:

- Anzeige -

Lade mich auf einen Kaffee ein

Für diesen Artikel und den Aufbau der Website ist jede Menge Kaffee geflossen. Wenn dir die Infos geholfen haben, freue ich mich jederzeit über neuen Treibstoff. Mit dem Klick auf den Button wirst du zu PayPal weitergeleitet. Dankeschön!

☕ Kaffee spendieren

Über mich

Seit über zehn Jahren nutze ich WordPress und schreibe auf verschiedenen Blogs. Als Spezialist für Content Marketing und SEO arbeite ich neben meiner Selbstständigkeit seit einiger Zeit für die NETZhelfer GmbH. Dort helfe ich verschiedenen Kunden als Website Booster. Auf meiner persönlichen Website berichte ich über meine Learnings.