JavaScript – Elemente selektieren

Um ein HTML-Element mit JavaScript zu selektieren, verwenden wir ein data-attribute. Das date-attribute sollte einen eindeutigen aussagekräftigen englischen Namen besitzen.

Warum?
Hat ein Element ein data-attribute, ist in unserem Fall davon auszugehen, dass eine Selektion und eine Verarbeitung per JavaScript erfolgt.

Möchte man das Element in s/css ansprechen, geht dies auch über das data-Attribute, sollte aber über Element-Id’s oder -Klassen erfolgen.
Eine Id wird verwendet, wenn das Element mit dieser Id auf der aktuellen Seite nur ein einziges mal vorkommt.

Eine Klasse wird verwendet, wenn auf der aktuellen Seite mehrere Elemente die gleiche Klasse haben.

Beispiele:

<div class="hidden-xxs hidden-xs" id="freeShippingWrapper" data-behavior="freeShippingWrapper">
 <!-- Some content -->
</div>

Selektion per JS

const freeShippingWrapper = document.querySelector('[data-behavior="freeShippingWrapper"]');

Selektion per JQuery

const freeShippingWrapper = $('[data-behavior="freeShippingWrapper"]');

Natürlich ist dies kein Standard und kann von jeder Agentur oder jedem Entwickler wie beliebt, verwendet werden.