JavaScript-Suche: getElement*, querySelector*
Das Erlernen der Suche und Auswahl von Elementen im Document Object Model (DOM) ist für JavaScript-Entwickler, die Websites interaktiv gestalten möchten, von zentraler Bedeutung. Dieser Leitfaden behandelt sowohl klassische DOM-Methoden als auch moderne Query-Selector und enthält einfache Beispiele, die Sie direkt ausprobieren können.
Effizienter Elementzugriff: getElementById
Die getElementById-Methode ist eine schnelle und zuverlässige Möglichkeit, auf ein bestimmtes Element über seine eindeutige ID zuzugreifen. Da Browser ID-Suchen optimieren können, ist diese Methode im Allgemeinen schneller als CSS-Selektoren. Im folgenden Beispiel wird der initiale Text „Default text“ sofort durch den JavaScript-Code ersetzt.
<!DOCTYPE html>
<html>
<head>
<title>getElementById Example</title>
</head>
<body>
<div id="main-content">Default text</div>
<script>
const element = document.getElementById('main-content');
element.innerHTML = "Modified text!"
</script>
</body>
</html>Result
Zugriff auf mehrere Elemente: getElementsByClassName und getElementsByTagName
INFO
Wenn Sie Elemente nach ihrer Klassen- oder Tag-Namen auswählen, erhalten Sie eine HTMLCollection. Dies ist eine Live-Sammlung, die sich automatisch aktualisiert, wenn sich das DOM ändert, und verhält sich wie ein Array für den Zugriff auf Elemente über den Index und das Lesen der length-Eigenschaft. Um darüber zu iterieren, müssen Sie sie zunächst mit der Methode Array.from in ein Array umwandeln.
Beispiel mit getElementsByClassName
Greifen Sie mit getElementsByClassName auf mehrere Elemente mit derselben Klasse zu. In diesem Beispiel haben wir zwei div-Elemente mit demselben Klassennamen. Wir ändern beide, indem wir die Elemente über ihren Klassennamen auswählen.
<!DOCTYPE html>
<html>
<head>
<title>getElementsByClassName Example</title>
</head>
<body>
<div class="info">First Info</div>
<div class="info">Second Info</div>
<script>
const infoElements = document.getElementsByClassName('info');
Array.from(infoElements).forEach(el => el.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Beispiel mit getElementsByTagName
Rufen Sie Elemente über ihren Tag-Namen mit getElementsByTagName ab. Dies ist dem vorherigen Beispiel völlig ähnlich, diesmal wählen wir jedoch nach dem Tag-Namen und nicht nach dem Klassennamen.
<!DOCTYPE html>
<html>
<head>
<title>getElementsByTagName Example</title>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<script>
const paragraphs = document.getElementsByTagName('p');
Array.from(paragraphs).forEach(el => el.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Flexible Suche mit querySelector und querySelectorAll
Auswahl mit querySelector
Verwenden Sie querySelector, um das erste Element zu finden, das einem CSS-Selektor entspricht. In diesem Beispiel wählen wir das erste Element mit der Klasse text aus, das ein direktes Kind des Elements mit der ID main ist.
<!DOCTYPE html>
<html>
<head>
<title>QuerySelector Example</title>
</head>
<body>
<div id="main"><span class="text">This will be replaced</span></div>
<div id="other"><span class="text">This one doesn't change</span></div>
<script>
const spanInsideDiv = document.querySelector('#main > .text');
spanInsideDiv.innerHTML = "MODIFIED!";
</script>
</body>
</html>Result
Abrufen mehrerer Elemente mit querySelectorAll
Mit querySelectorAll können Sie alle Elemente auswählen, die einem CSS-Selektor entsprechen. Beachten Sie, dass im Gegensatz zu getElementsBy*, das eine Live-HTMLCollection zurückgibt, querySelectorAll eine statische NodeList zurückgibt, die einen Schnappschuss der Elemente zum Zeitpunkt der Auswahl erstellt und sich nicht automatisch aktualisiert, wenn sich das DOM ändert.
<!DOCTYPE html>
<html>
<head>
<title>QuerySelectorAll Example</title>
</head>
<body>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
</ul>
<script>
const items = document.querySelectorAll('.item');
items.forEach(item => item.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Fazit
Die in diesem Leitfaden beschriebenen Techniken bieten JavaScript-Entwicklern leistungsstarke Werkzeuge, um effizient auf das DOM zuzugreifen und es zu manipulieren. Durch die Integration dieser Methoden können Entwickler die Interaktivität und Reaktionsfähigkeit ihrer Webanwendungen erheblich verbessern. Diese Beispiele sind bereit, in einer HTML-Datei getestet zu werden, und bieten praktische Erfahrungen mit jeder besprochenen Methode.
Praxis
Welche der folgenden Aussagen über die JavaScript-Methoden querySelector und getElementById sind korrekt?