Ist das eine in Browsern vorhandene JS-Bibliothek?

3 Antworten

Mirko Marek
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Mediengestalter Digital und Print
03.02.2025, 17:18

Hi Trismegisto,

die Methode 'querySelector' sowie classList.toggle sind ein fester Bestandteil von JavaScript und wird in über 95% aller Browser funktionieren. Es ist keine JavaScript-Bibliothek oder JavaScript-Framework. Es ist Standard-JavaScript of auch als Vanilla bezeichnet oder native JavaScript.

Mit der Funktion 

querySelector

kannst du ein HTML-Element mithilfe eines CSS-Selektors auswählen. Dieses Element kannst du anschließend in einer Variable speichern oder – wie in diesem Beispiel – direkt mit einer weiteren Methode oder Funktion bearbeiten.

In diesem Fall wird mit dem 

classList

-Objekt die Methode 

toggle

aufgerufen. Diese ermöglicht es, einer ausgewählten Klasse entweder hinzuzufügen, wenn sie fehlt, oder sie zu entfernen, falls sie bereits vorhanden ist.
Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)
Babelfish
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, JavaScript, Programmieren & Softwareentwicklung
02.02.2025, 19:26

Ja und nein. Das JavaScript ist Standard (Vanilla) und funktioniert ohne irgendwelche externen Bibliotheken. Allerdings wird ein Stylesheet benötigt, damit das ganze auch wie ein Menü aussieht und ein Logo erscheint. Ohne das haben die Klassen wie navbar, logo oder menu-toggle keine besondere Bedeutung.
Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.
Franky12345678
12.02.2025, 04:30

Wie kommst du darauf?

Das ist ein Stück HTML mit einer Zeile JavaScript.

Das, was in einer Programmiersprache selbst enthalten ist, bezeichnet man nicht als Bibliothek.

Eine Bibliothek ist eine Sammlung von nützlichen Routinen, die zu einer, vom Projekt unabhängigen, Einheit zusammengefasst und mit einer (hoffentlich gut dokumentierten) API versehen sind, mit dem Ziel sie universell, also in unterschiedlichen Projekten, verwenden zu können.

Wenn du eine .js-Datei mit folgendem Inhalt erstellst, hast du eine miniklitzekleine Bibliothek geschaffen.

function toggleElementClass(selector, cls) {
	document.querySelector(selector).classList.toggle(cls);
}

Das ist sozusagen das Rad für einen Wagen.

Um sie verwenden zu können, musst du sie im <head> einbinden, so dass sie geladen wird:

<script src="my_fancy_lib.js"></script>

Nun kannst du in deinem Projekt Räder verwenden.

Um sie tatsächlich zu verwenden, muss der js-Codeblock vom "Wagen" geändert werden, so dass die Bibliothek über die API genutzt werden kann:

<script>
    function toggleMenu() {
      toggleElementClass(".nav-links","nav-active");
    }
</script>

Sinn so einer Bibliothek ist:

  • Du das Rad nur einmal erfinden und kannst sie in mehreren Projekten verwenden.
  • Du musst das Rad vielleicht gar nicht erfinden, weil es bereits ein sehr gutes gibt, das du benutzen kannst
  • Wenn du meinst, dass dein Rad das beste ist, kannst du deine Bibliothek selber anbieten.

Vor wenigen Jahren war JavaScript längst nicht so umfangreich wie heute und vieles war in unterschiedlichen Browsern unterschiedlich gelöst (Internet Explorer war ein Krampf...)

Da hat sich kaum jemand die Mühe gemacht, jedem Browser sein Extrawürstchen zu backen.

War auch nicht nötig.

Da hat man einfach eine Bibliothek namens jQuery verwendet.

Die unterschiedlichen Browsereigenarten wurden innerhalb der Bibliothek "hinter den Kulissen" abgehandelt und über die eigene API nach außen hin vereinheitlicht, so dass derselbe Code in den unterschiedlichen Browsern trotz deren Eigenarten funktionierte.

Das würde damit wie folgt aussehen:

$('.nav-links').each(function(){
  $(this).toggleClass('nav-active');
});
Woher ich das weiß:Hobby – Ich beschäftige mich schon mehrere Jahre damit.