Zadaniem, przed którym bardzo często stają początkujący programiści javascript, jest wybranie elementu na stronie internetowej za pomocą jego atrybutu id.

Załóżmy, że mamy kod na stronie.

Jak mogę wybrać element z id="elem" i wykonać z nim pewne akcje?

Istnieje kilka opcji rozwiązania problemu. Przyjrzyjmy się im teraz.

Opcja 1. Użyj Metoda JavaScript getElementById.

Istnieje sposób na uzyskanie dostępu do elementu za pomocą jego identyfikatora przy użyciu „czystego” kodu javascript, bez korzystania z bibliotek innych firm. Ta metoda polega na użyciu metody ggetElementById("element_id"). W ten sposób odwołujemy się do potrzebnego nam elementu poprzez jego id.

Zobaczmy, jak to działa na prostym przykładzie.

Zauważ, że te wiersze kodu (skryptu) znajdują się poniżej samego elementu. Jest to warunek wstępny działania tego skryptu, ponieważ. Kod JavaScript jest wykonywany podczas ładowania strony. Jeśli umieścimy powyższy kod, to odniesiemy się do elementu na stronie, który jeszcze się nie załadował, tj. nie będzie go w kodzie w czasie wykonywania skryptu. Istnieją sposoby na uniknięcie tego, ale wykracza to poza zakres tego artykułu.

W rezultacie, jeśli wszystko działa poprawnie, dostaniemy wyskakujące okienko. To okno wyświetli tekst znajdujący się wewnątrz bloku div.

Zobaczmy teraz, jak możemy rozwiązać ten problem w inny sposób.

Opcja 2. Korzystanie z biblioteki Jquery.

Drugą opcją wyboru elementu według jego id jest użycie biblioteki Jquery. W praktyce we współczesnych skryptach ta metoda jest najczęściej stosowana. Jest o wiele wygodniejszy i łatwiejszy do zapamiętania.

Aby odnieść się do elementu po jego id, musisz użyć konstrukcji:

$("#element")

Tutaj elem to nazwa zawarta w atrybucie id.

Dlatego użyjemy strony trzeciej Biblioteka Javascript, który nazywa się Jquery, to ta biblioteka musi być najpierw podłączona.

Jest dodawany w sekcji , jednym ze sposobów, aby to zrobić, jest dodanie następującego wiersza kodu:

Aby biblioteka została załadowana, musi być połączenie z Internetem.

Sam skrypt, podobnie jak w poprzednim przykładzie, powinien znajdować się pod kodem elementu, z którym chcesz wejść w interakcję.

W związku z tym przeanalizowaliśmy dwa sposoby wyboru elementu na stronie internetowej za pomocą jego atrybutu id i interakcji z nim. Wybierz metodę, która Ci odpowiada i zastosuj ją w praktyce.

W ostatniej lekcji uwzględniono metodę getElementsByTagName, która zwraca tablicę ( Grupa) elementy strony według nazwy tagu.

Tutaj toczy się dalej praktyczna praca z javascriptem i metodą getElementById, która jest zwraca referencję do elementu, na podstawie unikalnego identyfikatora .

Metoda getElementById, podobnie jak getElementsByTagName jest metodą obiektu dokumentu.

Nazwa metody jest tłumaczona dosłownie: pobierz element według id.

Dowolny element ( tegu) dokumentu internetowego można przypisać własny id - identyfikator, dzięki któremu element staje się wyjątkowy i możesz uzyskać do niego dostęp, aby z nim pracować.

Zwróć uwagę e: nie ma s w nazwie metody na końcu słowa Element ( w przeciwieństwie do metody getElementsByTagName). Ma to na celu wygodę i wskazuje, że metoda jest używana do wyboru elementu.

Wyjaśnienie powyższego fragmentu kodu...

• tag obrazu ( obrazy f) ma id - identyfikator pingwina ;
• przy użyciu metody getElementById ten tag img jest wybierany przez identyfikator pingwina;
• w zmienną unikalny wpisano link do wybranego tagu;
• wtedy możesz pracować z tagiem, jak z obiektem przez zmienną unique , podobnie jak praca z obiektem Date za pomocą dowolnej zmiennej.

Po uzyskaniu dostępu do elementu ( tegu) strony internetowej przez id za pomocą metody getElementById, pracujemy już z nią jak z Object, co oznacza, że ​​uzyskujemy dostęp do atrybutów tagów jako właściwości Object.

Dlatego wartości atrybutów są już wartościami właściwości.

Kontynuujmy poprzedni przykład...

„Zamyślony Pingwin”>

Wyjaśnienia do przykładowego kodu...

• tag obrazu ( obrazy f) posiada określone atrybuty: src - adres pliku, szerokość i wysokość - szerokość i wysokość obrazka, alt - tekst alternatywny;
• uzyskując dostęp do tagu za pomocą metody getElementById jako obiektu, uzyskujemy dostęp do atrybutów tagu, jak obiektować właściwości;
• ALE wartości atrybutów są teraz wartości nieruchomości;
• w javascript właściwości obiektu są dostępne za pomocą kropki. Następnie wyświetlamy alt - alternatywny tekst tagu img za pomocą metody alertu na ekranie.

Mam nadzieję, że nie jesteś zdezorientowany tym wszystkim. Musisz jednocześnie zrozumieć, co dzieje się na poziomie programu javascript i na poziomie znaczników dokumentu.

Znacznik img jest unikalnym obiektem;

Szerokość znacznika i atrybuty alt są właściwościami obiektu;

Wartości atrybutów „128” i „Zamyślony Pingwin” są wartościami nieruchomości;

// Oto jak to wygląda z perspektywy javascriptu:

zmienna unikatowa = (

szerokość : "128" ,

alt : „Zamyślony Pingwin”

}

Tak działa metoda getElementById, zwracająca referencję do dowolnego elementu ( etykietka) strony internetowej, jeśli posiada unikalny identyfikator. Następnie pracujemy z tym elementem na poziomie javascript. jak z przedmiotem...

Należy wziąć pod uwagę, że: tak jak w poprzedniej lekcji, tutaj - podczas pracy z metodą getElementById linię wywołania skryptu należy umieścić na końcu dokumentu html

jQuery zapewnia inne opcje wybierania elementów dokumentu internetowego.

Aby skrypt działał z jakimś elementem strony, ten element musi zostać najpierw odnaleziony. W JavaScript można to zrobić na kilka sposobów. Znaleziony element jest zwykle przypisywany do zmiennej, a później, poprzez tę zmienną, skrypt uzyskuje dostęp do elementu i wykonuje na nim pewne akcje.

Szukaj według identyfikatora

Jeśli element ma nadany atrybut id w kodzie strony, to element można znaleźć według id. To najłatwiejszy sposób. Element jest przeszukiwany przy użyciu metody getElementById() obiektu globalnego dokumentu.

document.getElementById(id)

Opcje:

id - identyfikator szukanego elementu. id jest ciągiem, więc musi być w cudzysłowie.

Stwórzmy stronę, dodajmy do niej element i nadajmy jej id i znajdźmy ten element w skrypcie:

Kod HTML:

JavaScript:

var blok = document.getElementById("blok"); dziennik konsoli (blok);

Znaleziony element przypisaliśmy do zmiennej bloku i wyświetlaliśmy zmienną w konsoli. Otwórz konsolę przeglądarki, powinna zawierać element.

Ponieważ wyszukiwanie według identyfikatora jest najłatwiejszym i najwygodniejszym sposobem, jest często używane. Jeśli musisz pracować z jakimś elementem w skrypcie, to atrybut id jest ustawiany dla tego elementu w kodzie strony, nawet jeśli wcześniej nie był ustawiony. I znajdź element według identyfikatora.

Szukaj według klasy

Metoda getElementsByClassName() pozwala znaleźć wszystkie elementy należące do określonej klasy.

document.getElementsByClassName(class)

Opcje:

class - klasa elementów do odnalezienia

Metoda zwraca pseudotablicę zawierającą znalezione elementy. Nazywa się to pseudotablicą, ponieważ wiele metod tablicowych nie działa w tym przypadku. Ale główna właściwość pozostaje - możesz odwołać się do dowolnego elementu tablicy. Nawet jeśli zostanie znaleziony tylko jeden element, nadal znajduje się on w tablicy.

Dodajmy elementy do strony i nadajmy im klasę. Niektóre elementy zostaną umieszczone wewnątrz utworzonego wcześniej bloku. Druga część zostanie utworzona poza blokiem. Znaczenie tego stanie się jasne nieco później. Teraz strona będzie wyglądać tak:

Kod HTML:

JavaScript:

Teraz zostaną znalezione tylko te elementy, które znajdują się w bloku.

Szukaj według tagu

Metoda getElementsByTagName() znajduje wszystkie elementy z określonym znacznikiem. Zwraca również pseudotablicę ze znalezionymi elementami.

document.getElementsByTagName (znacznik)

Opcje:

tag - tag elementów do znalezienia

Znajdźmy wszystkie znaczniki p znajdujące się na stronie:

var p = document.getElementsByTagName("p"); dziennik konsoli(p);

Tę metodę można również zastosować nie do całego dokumentu, ale do określonego elementu. Znajdź wszystkie znaczniki p w bloku.

Szukaj według selektora

Istnieją metody querySelector() i querySelectorAll() wyszukujące elementy pasujące do danego selektora. Oznacza to, że zostaną znalezione elementy, do których styl zostałby zastosowany, gdyby został określony w takim selektorze. Jednocześnie obecność takiego selektora w stylu strony wcale nie jest konieczna. Te metody nie mają nic wspólnego z CSS. Metoda querySelectorAll() znajduje wszystkie elementy pasujące do selektora. A metoda querySelector() znajduje jeden element, który jest pierwszym elementem w kodzie strony. Metody te mogą zastąpić wszystkie omówione wcześniej sposoby wyszukiwania elementów, ponieważ istnieje selektor id, selektor tagów i wiele innych.

document.querySelector(selektor)

document.querySelectorAll(selektor)

Selektory pisze się w taki sam sposób jak w CSS, tylko nie zapomnij wstawić cudzysłowów.

Dodajmy listę do strony i znajdźmy ją za pomocą selektora. Szukamy tylko jednego elementu i wiemy na pewno, że będzie to pierwszy, bo jedyny na stronie. Dlatego w tym przypadku wygodniej jest skorzystać z metody querySelector(). Ale korzystając z tej metody, musisz wziąć pod uwagę, że te same elementy mogą zostać dodane do strony w przyszłości. Dotyczy to jednak większości metod.

Kod HTML:

Te metody mogą również wyszukiwać elementy nie w całym dokumencie, ale w pojedynczym elemencie.

W tym przykładzie użyliśmy tylko selektorów według tagu. Spróbuj znaleźć elementy strony za pomocą innych selektorów.

Sąsiednie elementy

Dla znalezionego elementu możesz znaleźć sąsiadów. Każdy element jest obiektem, a sąsiednie elementy można uzyskać poprzez właściwości tego obiektu. Właściwość previousElementSibling zawiera poprzedni element, a właściwość nextElementSibling zawiera następny element.

element.poprzedniElementSibling

element.nextElementSibling

Znajdź element za blokiem:

Elementy potomne

Właściwość children zawiera tablicę dzieci.

element.dzieci

Znajdźmy elementy potomne blok.

Oprócz umożliwienia stronom internetowym wybierania elementów według ich identyfikatora, możemy również wybierać elementy według ich atrybutu klasy.

Zadanie jest również bardzo częste. Kiedy piszę swoje skrypty, bardzo często muszę używać tego selektora.

Załóżmy, że na stronie mamy następujący kod.

Zadanie jest proste, musisz wybrać element z klasą class = "elem" i wykonać na nim kilka akcji za pomocą Javascript.

Przyjrzyjmy się kilku opcjom, jak to zrobić.

Opcja 1: Użyj metody JavaScript getElementsByClassName.

Jeśli nie używasz żadnych dodatkowych bibliotek, możesz uzyskać dostęp do elementu za pomocą metody getElementsByClassName("nazwa_klasy").

Na przykład w odniesieniu do kod źródłowy, możesz dodać następujące wiersze kodu.

W rezultacie, jeśli wszystko działa poprawnie, otrzymamy wyskakujące okienko, w którym zostanie wyświetlony tekst znajdujący się w bloku div.

Należy pamiętać, że wynikiem wykonania metody getElementsByClassName będzie tablica elementów. Na stronie może znajdować się kilka elementów o tej samej klasie.

Dlatego na końcu konstrukcji document.getElementsByClassName("elem") należy wskazać, że wyświetlany jest element zerowy tablicy(). Liczenie w JavaScript zaczyna się od zera, a nie od jednego.

Jednak problem z użyciem metody getElementsByClassName polega na tym, że metoda ta nie jest obsługiwana w starszych wersjach przeglądarek.

Jest kilka sztuczek, aby to obejść, ale jest to zbędny kod. Na przykład możesz użyć wyrażeń regularnych:

If(document.getElementsByClassName == undefined) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\\b"+cl+"\\b"); var elem = this.getElementsByTagName( "*"); for (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

To jeden ze sposobów rozwiązania problemu. Ale szczerze mówiąc nie jest dla mnie zbyt akceptowalne zapychanie strony niepotrzebnym kodem, dlatego najczęściej korzystam z drugiego rozwiązania problemu.

Opcja 2. Korzystanie z biblioteki Jquery.

Korzystanie z biblioteki Jquery znacznie ułatwia rozwiązanie problemu wyboru elementów według ich atrybutu klasy. Musisz użyć konstruktu:

$(".elem")

Tutaj elem jest nazwą klasy przypisaną do elementu.

Należy pamiętać, że aby to zadziałało, najpierw należy dołączyć bibliotekę Jquery. Jest dodawany w sekcji , jednym ze sposobów, aby to zrobić, jest dodanie następującego wiersza kodu:

Aby biblioteka została załadowana, musi być połączenie z Internetem.

Zobaczmy, jak to działa na przykładzie.

Sam skrypt, podobnie jak w poprzednim przykładzie, powinien znajdować się pod kodem elementu, z którym chcesz wejść w interakcję.

Tak więc istnieją dwa sposoby interakcji z elementami, które mają ustawiony atrybut class. Wybierz ten, który najbardziej Ci odpowiada i wykorzystaj go w praktyce.

Właściwość pasuje do określonego ciągu. Ponieważ identyfikatory elementów muszą być unikalne, jeśli zostaną określone, są one użytecznym sposobem szybkiego uzyskania dostępu do określonego elementu.

Jeśli potrzebujesz uzyskać dostęp do elementu, który nie posiada identyfikatora, możesz użyj querySelector() , aby znaleźć element za pomocą dowolnego selektora .

Składnia

var element = document.getElementById(id);

Parametry

id Identyfikator elementu do zlokalizowania. ID to łańcuch z rozróżnianiem wielkości liter, który jest unikalny w obrębie dokumentu; tylko jeden element może mieć dowolny identyfikator.

wartość zwrotu

Obiekt Element opisujący obiekt elementu DOM pasujący do podanego identyfikatora lub null, jeśli w dokumencie nie znaleziono pasującego elementu.

przykład

HTML

Trochę tekstu tutaj

niebieski czerwony

JavaScript

function changeColor(newColor) ( var elem = document.getElementById("para"); elem.style.color = newColor; )

wynik

Uwagi dotyczące użytkowania

Wielkie litery „Id” w nazwie tej metody musi być poprawne, aby kod działał; getElementByID() to nie ważne i nie zadziała, jakkolwiek może się to wydawać naturalne.

W przeciwieństwie do niektórych innych metod wyszukiwania elementów, takich jak Document.querySelector() i Document.querySelectorAll() , metoda getElementById() jest dostępna tylko jako metoda globalnego obiektu dokumentu, a nie dostępna jako metoda na wszystkich obiektach elementów w DOM. Ponieważ wartości identyfikatorów muszą być unikalne w całym dokumencie, nie ma potrzeba„lokalne” wersje funkcji.

przykład

cześć słowo1

cześć słowo2

cześć słowo3

cześć słowo4

Jeśli nie ma elementu o podanym id , ta funkcja zwraca null . Zauważ, że w parametrze id rozróżniana jest wielkość liter, więc document.getElementById(" M ain") zwróci null zamiast elementu

ponieważ "M" i "m" są różne dla celów tej metody.

Elementy poza dokumentem nie są przeszukiwane przez getElementById() . Tworząc element i przypisując mu identyfikator, musisz wstawić element do drzewa dokumentu za pomocą lub podobnej metody, zanim będziesz mógł uzyskać do niego dostęp za pomocą getElementById() :

var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el będzie puste!

Dokumenty inne niż HTML. Implementacja DOM musi zawierać informacje, które mówią, które atrybuty są typu ID. Atrybuty o nazwie "id" nie są typu ID, chyba że zostało to zdefiniowane w DTD dokumentu. Atrybut id jest zdefiniowany jako typ ID w typowych przypadkach XHTML , XUL i innych. Implementacje, które nie wiedzą, czy atrybuty są typu ID lub nie powinny zwracać wartości null .

Specyfikacja

Specyfikacja	Status	Komentarz
Specyfikacja Document Object Model (DOM) Level 1	Przestarzały	Wstępna definicja interfejsu
Specyfikacja podstawowa modelu obiektowego dokumentu (DOM) Level 2 Definicja „getElementById” w tej specyfikacji.	Przestarzały	Zastąp DOM 1
Specyfikacja podstawowa modelu obiektowego dokumentu (DOM) Level 3 Definicja „getElementById” w tej specyfikacji.	Przestarzały	Zastąp DOM 2
DOM Definicja „getElementById” w tej specyfikacji.	Standard życia	Zamiar zastąpienia DOM 3

Kompatybilność z przeglądarką

Tabela zgodności na tej stronie jest generowana na podstawie uporządkowanych danych. Jeśli chcesz wnieść swój wkład w dane, wejdź na https://github.com/mdn/browser-compat-data i wyślij nam pull request.

Zaktualizuj dane zgodności na GitHub

	Pulpit						mobilny
	Chrom	Brzeg	Firefox	Internet Explorer	Opera	safari	widok na Androida	Chrome na Androida	Firefox dla Androida	Opera na Androida	Safari na iOS	Samsung Internet
getElementById	Pełna obsługa Chrome 1	Krawędź Pełne wsparcie 12	Pełna obsługa Firefoksa 1	IE Pełne wsparcie 5,5	Pełna obsługa Opery 7	Safari Pełne wsparcie 1	Pełna obsługa WebView Android Tak	Pełna obsługa Chrome na Androida 18	Pełna obsługa Firefoksa AndroidTak	Pełna obsługa Opery Android 10.1	Safari iOS Pełna obsługa 1	Samsung Internetowy Android ?

Legenda

Pełne wsparcie Pełne wsparcie Kompatybilność nieznana Kompatybilność nieznana