Jaka jest różnica pomiędzy identyfikatorami i klasami w elementach <div>?

pytanie zadane 22 stycznia 2018 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

Witam.

Mam do Was pytanie, które wydaje się banalnie proste, ale to mogą być tylko pozory. Pewnie 99% tutejszych użytkowników stwierdzi, że warto stosować tylko klasy w elementach <div>. Jak wiadomo, strony internetowe są głównie tworzone na elementach:

<div class="nazwa_elementu">

albo

<div id="nazwa_elementu">

Kiedyś ktoś mi napisał, że identyfikatory w elementach <div> stosuje się wtedy, gdy tenże element będzie obsługiwany także przez język JavaScript. Czy to prawda?

Jaka jest różnica pomiędzy identyfikatorami i klasami w elementach <div>?

3 odpowiedzi

odpowiedź 22 stycznia 2018 przez thryndl Nałogowiec (30,470 p.)

Kiedyś ktoś mi napisał, że identyfikatory w elementach <div> stosuje się wtedy, gdy tenże element będzie obsługiwany także przez język JavaScript.

Bzdura. Nie ma restrykcji co do tego, jaki uchwyt robisz w JS. Możesz "łapać" zarówno po ID, klasie czy samym tagu.

Podstawowa zasada jest taka.

Identyfikator jest unikatowy. Każdy element może mieć tylko jeden identyfikator i każda strona może posiadać tylko jeden element z danym ID.

Natomiast klasa nie jest unikatowa. Jedną klasę możesz użyć na wielu elementach, a także na jednym elemencie możesz użyć wielu klas.

komentarz 22 stycznia 2018 przez Krzysiek_34 Mądrala (6,050 p.)

Chodzi Ci o coś takiego?

<div id="nazwa_elementu">
	coś tam
</div>

oraz

<div class="nazwa_elementu_1">
	<div class="nazwa_elementu_2">
		<div class="nazwa_elementu_3">
			<div class="nazwa_elementu_4">
				coś tam
			</div>
		</div>
	</div>
</div>

Czy bardziej o coś innego?

komentarz 22 stycznia 2018 przez thryndl Nałogowiec (30,470 p.)

Opcja pierwsza. Jeden element z danym ID na stronę.

Drugi przypadek reprezentuję użycie klas.

komentarz 22 stycznia 2018 przez Krzysiek_34 Mądrala (6,050 p.)

Mniej więcej już wiem o co chodzi. Dzięki za wskazówki.

komentarz 22 stycznia 2018 przez lapacz.kornel Mądrala (6,930 p.)

@thryndl, w JS da się "łapać" nawet po atrybutach .

komentarz 23 stycznia 2018 przez thryndl Nałogowiec (30,470 p.)

O to chodzi. Dlatego twierdzenie, że identyfikator nadaje się ze względu na wykorzystanie go później do użycia w JS jest błędne.

komentarz 23 stycznia 2018 przez lapacz.kornel Mądrala (6,930 p.)

getElementById ma większe wsparcie od querySelector więc jeśli chcemy stworzyć aplikacje z naprawdę wielkim wsparciem jesteśmy "skazani" na używanie id.

komentarz 23 stycznia 2018 przez thryndl Nałogowiec (30,470 p.)

98.06% w skali globalnej to mało? querySelectora wspierają obecnie wszystkie dostępne przeglądarki na rynku, wliczając w to przeglądarki mobilnej. Przy czym querySelector i querySelectorAll są o wiele wygodniejszą opcją w użyciu niż getElementBy*.

A jeśli myślisz o archaizmach takich jak starsze wersje IE to daruj sobie.

komentarz 23 stycznia 2018 przez lapacz.kornel Mądrala (6,930 p.)

Oczywiście że nie myślę... mój komentarz miał jedynie funkcję informacyjną. Podałem jedyny powód do używania getElementById. Nie powiedziałem że querySelector nie ma dobrego wsparcia. Powiedziałem że getElementById ma lepsze co nie mija się z prawdą

odpowiedź 22 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

odpowiedź 22 stycznia 2018 przez dwadolary Gaduła (4,650 p.)

Identyfikator jest unikalny i możesz go przypisać tylko jednemu elementowi w dokumencie. Tę samą klasę może natomiast posiadać kilka elementów i to jest główna różnica. Dodatkowo, jeden element może mieć jedno ID, ale wiele klas.

Nie zaleca się raczej stylowania pod id, lepiej używać do tego klas. ID jest przydatne w javascripcie, gdy chcesz manipulować konkretnym elementem przez document.getElementById. Używając document.getElementsByClassName, nie dostajesz jednego elementu, a kolekcję tylu, ile posiada wybraną klasę. Wtedy, np. w pętli, możesz przypisać im wszystkim jakieś tło.