JavaScript Pobierz element według identyfikatora
exp |
find |
JavaScript |
open |
sin
Michael Zippo
Chcesz wybrać element na stronie internetowej w JavaScript ? Jest to specjalność metody getElementById, tzw. króla elementów getters w JavaScript.
getElementById pozwala wybrać element na podstawie jego ID. To całkiem zrozumiała nazwa metody, jeśli się nad tym zastanowić.
W tym przewodniku omówimy, czym jest getElementById, jak to działa i kiedy powinieneś użyć go w swoim kodzie. Przyjrzymy się przykładowi tekstu przycisku „Pokaż/Ukryj” w naszym demo document.getElementById.
Zagłębmy się w Let!
Co to jest getElementById?
getElementById () to metoda dokumentu, która wybiera element HTML DOM na stronie na podstawie określonego atrybutu identyfikatora elementu.
Rozważ następujący kod:
W naszym kodzie HTML zdefiniowaliśmy element Znajdź swój Bootcamp
Możesz skorzystać z tej metody, jeśli do artykułu masz przypisany identyfikator. Zamiast używać większego elementu getter, takiego jak querySelector lub getElementByClass, który zwraca pierwszy obiekt elementu, który spełnia określone kryteria, możesz uzyskać element za pomocą getElementById ().
getElementById () to powszechna metoda używana do pobierania elementu na stronie internetowej.
Co powinieneś wiedzieć o getElementById
Zanim zajmiemy się przykładem, porozmawiajmy o błędach, które często popełniają nowicjusze podczas korzystania z tej metody.
Zawsze jest to frustrujące, gdy nauczyć się czegoś nowego i to nie działa, więc porozmawiajmy o typowych błędach, które możesz popełnić podczas nauki getElementById ( ) .
Po pierwsze , getElementById ()< /kod> rozróżnia wielkość liter . Podczas gdy termin ID jest zwykle pisany wielkimi literami w programowaniu, podczas korzystania z tej metody należy używać wielkości wielbłąda Id. W przeciwnym razie ta metoda nie zadziała
Po drugie, identyfikator określony przez Ciebie nie może zawierać hashtagu. Rozważ ten kod:
Ten przykład może sprawiać wrażenie, że otrzymuje element o identyfikatorze mainButton, ale tak nie jest. Wystarczy podać identyfikator elementu element, który chcesz odzyskać:
Teraz, gdy jest już na uboczu, możemy przejść do przejrzenia przykładu.
Jak korzystać z funkcji getElementById
Podczas przeglądania sieci możesz natknąć się na tagi z napisem „Czytaj więcej”. Strona internetowa może wyświetlać kilka zdań fragmentu tekstu, więc zostaniesz poproszony o naciśnięcie tego przycisku, aby zobaczyć resztę tekstu.
Zbudujemy tę funkcję za pomocą gettera getElementB yId (). Ostateczny kod tego samouczka można wyświetlić pod adresem GitHub .
tworzenie front-endu
Zacznijmy od stworzenia prostego front-endu za pomocą HTML i CSS Utwórz nowy plik o nazwie index. html i wklej następujący kod:
JavaScript getElementById ()
Chcesz dowiedzieć się więcej o getElementById ()? Dobrze trafiłeś.
Dowiedz się więcej getElementById () to metoda JavaScript, która pozwala wybrać element na pasmo strony. Ta metoda jest powszechnie nazywana „getterem”, ponieważ „pobiera” element strony.
