JavaScript Pobierz element według identyfikatora
__main__ Python module |
ast Python module |
base64 Python module |
code Python module |
COM PHP module |
dis Python module |
DOM PHP module |
Ev PHP module |
Event PHP module |
exp |
Hash PHP module |
html Python module |
http Python module |
imp Python module |
io Python module |
JavaScript |
os Python module |
PS PHP module |
Python For dummies |
Python functions |
re Python module |
select Python module |
SPL PHP module |
StackOverflow |
tty Python module |
UI PHP module
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.