Problem z document.getElementById Opcje

[Wowas]

Czy da się zrobić tak, żeby document.getElementById pobierał nie tylko pierwszego diva z podanym id ale wszystkie w dokumencie?

[Aqu]

[HTML] pobierz, plaintext 
document.querySelectorAll('#id');
[HTML] pobierz, plaintext 

[Turson]

ID powinno byc unikalne dlaczego wiec masz ich więcej? Użyj klasy

[PrinceOfPersia]

Dokładnie. W ogóle id jako takie się powinno rzadko stosować.

[Crozin]

W ogóle id jako takie się powinno rzadko stosować.

Mógłbyś rozwinąć?

[PrinceOfPersia]

Id powinno być unikalne w całym dokumencie. Jednak wiele rzeczy wydaje się unikalne, a wcale takie nie jest.

Wyobraź sobie taki scenariusz. Robisz stronę, na stronie umieszczasz jakiś widżet, np. carousel, przypisujesz mu id carousel, i za pomocą tego id odwołujesz się do tego elementu wszędzie, w CSS:

[CSS] pobierz, plaintext 
#carousel {
  padding: 10px 10px;
  ...
}
 
...
#carousel {
...
}
[CSS] pobierz, plaintext 

w JS:

[JAVASCRIPT] pobierz, plaintext 
$("#carousel .slide-change").click(function () {
...
};
 
setInterval(function () {
   $("#carousel .....").changeSlide(); // taki tam pół-pseudo-kod ;)
});
[JAVASCRIPT] pobierz, plaintext 

itp. itd.

No i spoko, działa.
A teraz niespodzianka. Okazuje się, że chcesz na stronie umieścić drugi taki sam widżet carousela, tylko na dole strony. I wszystko musisz pozmieniać (bo używając id zakładałeś że carousel będzie jeden).
A jakbyś pisał od początku tak

[CSS] pobierz, plaintext 
.carousel {
...
}
[CSS] pobierz, plaintext 

czy tak:

[JAVASCRIPT] pobierz, plaintext 
$(".carousel .slide-change").click(function () {
});
[JAVASCRIPT] pobierz, plaintext 

miałbyś łatwiejsze zadanie....


Z drugiej strony id czasem są niezbędne jeśli np. chcemy zidentyfikować jakiś element po to, żeby dało się na niego wejść przez adres z hashem na końcu, np. w kodzie strony wikipedii masz:

[HTML] pobierz, plaintext 
<span class="mw-headline" id="External_links">External links</span></h2>
[HTML] pobierz, plaintext 

dzięki temu adres: http://en.wikipedia.org/wiki/Cat#External_links (z #External_links na końcu) przenosi się od razu na dół strony do zewnętrznych linków. Albo też id się przydają jak chcemy jakiś element jednoznacznie zidentyfikować w skryptach (np. robimy portfolio i chcemy pokazywać kontakt do nas w animowanym okienku dialogowym. Więc tworzymy ukryty element o id #kontakt, i jak klikamy button z napisem "Kontakt" to wywołuje on np. taki kod

[JAVASCRIPT] pobierz, plaintext 
$("#kontakt").show(); 
[JAVASCRIPT] pobierz, plaintext 

i pokazuje się to, bardzo konkretne okienko z danymi kontaktowymi,.

W takich sytuacjach używanie id MA sens, bo identyfikujesz bardzo konkretne okienko na stronie, które chcesz pokazać. Z drugiej strony nawet do takiego okienka prędzej bym dodał jakąś klasę (na przykład klasę "dialog") a potem stylował np.

[CSS] pobierz, plaintext 
.dialog {
  font-size: 12px;
}
[CSS] pobierz, plaintext 

bo jednak - jaką mam pewność, że za chwilę nie będę potrzebował innego, podobnego okienka "O mnie"? Takie rzeczy lubią się same "mnożyć"...
Tak samo sam przycisk z napisem "Kontakt". Mógłbym go nazwać #contact-button, ale co jeśli będę chciał mieć 2 przyciski/linki na stronie, które do tego samego służą?
więc klasa, albo dodanie jakiegoś atrybutu (np. <a class="dynamic-link" href="#contact">kontakt</a> czy coś podobnego. A potem np.

[JAVASCRIPT] pobierz, plaintext 
$(".dynamic-link").click(function () {
   var id = $(this).attr('href');
   $(id).show();
});
[JAVASCRIPT] pobierz, plaintext 

Myślę, że to kwestia żeby odróżnić elementy/rzeczy/zachowania, które prawdopodobnie będą się mnożyć/powtarzać na stronie (wtedy raczej id będzie kiepskim pomysłem), od rzeczy unikalnych, które musimy zidentyifkować (wtedy id będzie akurat dobrym pomysłem). Ale jednak wydaje mi się, że ludzie nadużywają id i wrzucają je na siłę (co widać i po tym wątku).

Ten post edytował PrinceOfPersia 29.04.2015, 22:01:11