Oprócz tego, że możemy wybierać elementy na stronach internetowych po ich identyfikatorze, możemy także wybierać elementy po ich atrybucie klasy.

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

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

Zawartość bloku.

Zadanie jest proste, należy wybrać element z klasą class="elem" i wykonać z nim pewne akcje za pomocą JavaScript.

Przyjrzyjmy się kilku opcjom, jak to zrobić.

Opcja 1. Użyj Metoda JavaScript getElementsByClassName.

Jeśli nie korzystasz z żadnych dodatkowych bibliotek, dostęp do elementu możesz uzyskać za pomocą metody getElementsByClassName(“nazwa_klasy”).

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

Zablokuj zawartość. alert(document.getElementsByClassName("element").innerHTML);

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

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

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.

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

Można to obejść, ale jest to kod zbędny. Można na przykład użyć wyrażeń regularnych:

If(document.getElementsByClassName == niezdefiniowany) ( document.getElementsByClassName = funkcja(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; } };

Jest to jeden ze sposobów rozwiązania problemu. Ale szczerze mówiąc, nie do przyjęcia jest dla mnie zaśmiecanie strony niepotrzebnym kodem, dlatego najczęściej korzystam z drugiej opcji, aby rozwiązać problem.

Opcja 2. Korzystanie z biblioteki Jquery.

Korzystanie z biblioteki Jquery znacznie ułatwia rozwiązanie problemu wybierania elementów według ich atrybutu klasy. Musisz zastosować następującą konstrukcję:

$(.element")

Tutaj elem jest nazwą klasy przypisaną do elementu.

Trzeba pamiętać, że aby to zadziałało, należy najpierw dołączyć bibliotekę Jquery. Został on dodany w sekcji, jednym ze sposobów, w jaki można to zrobić, jest dodanie następującego wiersza kodu:

Aby biblioteka mogła zostać załadowana, konieczne jest połączenie z Internetem.

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

Zawartość bloku. alert($(".elem").html());

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

Oto dwa sposoby interakcji z elementami, które mają ustawiony atrybut class. Wybierz ten, który najbardziej Ci odpowiada i zastosuj go w praktyce.

W ostatniej lekcji przyjrzeliśmy się metodzie getElementsByTagName, która zwraca tablicę ( Grupa) elementy strony według nazwy tagu.

Kontynuacja tutaj praktyczna praca z javascript i przyjrzymy się metodzie getElementById, która zwraca łącze do elementu na podstawie jego unikalnego identyfikatora identyfikatora.

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

Nazwa metody jest dosłownie przetłumaczona: pobierz element według identyfikatora.

Dowolny element ( tegu) dokumentowi sieciowemu można przypisać własny identyfikator, dzięki czemu element staje się unikalny i można z nim pracować.

Uwaga: w nazwie metody nie ma litery s na końcu słowa Element ( w przeciwieństwie do metody getElementsByTagName). Robi się to dla wygody i wskazuje, że metoda służy do wybierania elementu.

/* Dodaj link do tagu img, używając identyfikatora pingwina do unikalnej zmiennej */

Małe wyjaśnienie powyższego fragmentu kodu...

• znacznik img ( obrazy e) ma pingwina identyfikacyjnego;
• przy użyciu metody getElementById ten konkretny znacznik img jest wybierany poprzez identyfikator pingwina;
• unikalna zmienna zawiera link do wybranego tagu;
• Następnie możesz pracować ze znacznikiem jak z obiektem za pomocą unikalnej zmiennej, tak samo jak pracowałeś z obiektem Date za pomocą dowolnej zmiennej.

Po uzyskaniu dostępu do elementu ( tegu) strony WWW po id metodą getElementById, pracujemy już z nią jak z Obiektem, czyli mamy dostęp do atrybutów tagu jako właściwości Obiektu.

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

Kontynuujmy poprzedni przykład...

„Zamyślony pingwin” >

var unikalny = dokument .getElementById („pingwin” );

alert(unikalny.alt); /* Wyświetla wartość właściwości alt unikalnego obiektu (wartość atrybutu alt znacznika img) */

Wyjaśnienia przykładowego kodu...

• znacznik img ( obrazy e) ma określone atrybuty: src - adres pliku, szerokość i wysokość - szerokość i wysokość obrazu, alt - tekst alternatywny;
• Uzyskując dostęp do tagu za pomocą metody getElementById jako obiektu, uzyskujemy dostęp do atrybutów tagu jako właściwości obiektu;
• A wartości atrybutów są teraz wartościami właściwości;
• W JavaScript dostęp do właściwości obiektu można uzyskać za pomocą kropki. Następnie wyświetlamy na ekranie alt - alternatywny tekst znacznika img metodą alertu.

Mam nadzieję, że nie jesteście zdezorientowani tym wszystkim. Musisz jednocześnie rozumieć, co dzieje się na poziomie programu JavaScript i na poziomie znaczników dokumentu.

Znacznik img jest unikalnym obiektem;

Atrybuty znacznika szerokość i alt są właściwościami obiektu;

Wartości atrybutów „128” i „Przemyślany pingwin” są wartościami właściwości;

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

var unikalny = (

szerokość: "128",

alt: „Zamyślony pingwin”

}

Tak działa metoda getElementById, zwracająca link do dowolnego elementu ( etykietka) strona internetowa, jeśli posiada unikalny identyfikator id. Następnie pracujemy z tym elementem na poziomie JavaScript jako obiektem...

Uwaga: podobnie jak w poprzedniej lekcji, tutaj - pracując z metodą getElementById, linię wywołania skryptu należy umieścić na końcu dokumentu HTML

jQuery ma inne opcje wybierania elementów w dokumencie internetowym.

Zadaniem, które bardzo często staje przed początkującymi programistami JavaScript, jest wybranie elementu na stronie internetowej po jego atrybucie id.

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

Zablokuj zawartość.

Jak wybrać element za pomocą id="elem" i wykonać na nim serię działań?

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

Opcja 1: Użyj metody getElementById JavaScript.

Istnieje sposób uzyskania dostępu do elementu poprzez jego identyfikator przy użyciu „czystego” kodu JavaScript, bez korzystania z zewnętrznych bibliotek. Metoda ta polega na wykorzystaniu metody ggetElementById(“element_id”). W ten sposób uzyskujemy dostęp do potrzebnego nam elementu po jego identyfikatorze.

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

Zablokuj zawartość. alert(document.getElementById("element").innerHTML);

Należy pamiętać, że te linie kodu (skryptu) znajdują się pod samym elementem. Jest to warunek wstępny działania tego skryptu, ponieważ... Kod JavaScript jest wykonywany podczas ładowania strony. Jeśli umieścimy powyższy kod, uzyskamy dostęp do elementu na stronie, który jeszcze się nie załadował, czyli tzw. nie będzie go jeszcze w kodzie w momencie wykonania skryptu. Można tego uniknąć, ale wykracza to poza zakres tego artykułu.

W rezultacie, jeśli wszystko działa poprawnie, otrzymamy wyskakujące okienko. W tym oknie zostanie wyświetlony 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 identyfikatora jest użycie biblioteki Jquery. W praktyce we współczesnych skryptach najczęściej stosuje się tę metodę. Jest to o wiele wygodniejsze i łatwiejsze do zapamiętania.

Aby odwołać się do elementu po jego identyfikatorze, należy zastosować następującą konstrukcję:

$("#element")

Tutaj elem jest nazwą zawartą w atrybucie id.

Ponieważ skorzystamy z pomocy strony trzeciej Biblioteka JavaScript, który nazywa się Jquery, należy najpierw dołączyć tę bibliotekę.

Został on dodany w sekcji, jednym ze sposobów, w jaki można to zrobić, jest dodanie następującego wiersza kodu:

Aby biblioteka mogła zostać załadowana, konieczne jest połączenie z Internetem.

Zablokuj zawartość. alert($("#elem").html());

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

Dlatego omówiliśmy dwa sposoby wybierania elementu na stronie internetowej na podstawie jego atrybutu id i interakcji z nim. Wybierz metodę, która Ci odpowiada i zastosuj ją w praktyce.

Aby skrypt zadziałał z jakimkolwiek elementem strony, należy najpierw ten element znaleźć. Można to zrobić na kilka sposobów w JavaScript. Znaleziony element jest zwykle przypisywany do zmiennej, a następnie poprzez tę zmienną skrypt uzyskuje dostęp do elementu i wykonuje z nim pewne akcje.

Wyszukaj według identyfikatora

Jeśli element ma w kodzie strony atrybut id, wówczas element można znaleźć po id. To najprostszy sposób. Element jest wyszukiwany za pomocą metody getElementById() globalnego obiektu dokumentu.

dokument.getElementById(id)

Opcje:

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

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

Kod HTML:

JavaScript:

var blok = document.getElementById("blok"); konsola.log(blok);

Przypisaliśmy znaleziony element do zmiennej blokowej i wyprowadziliśmy zmienną do konsoli. Otwórz konsolę przeglądarki, element powinien być tam wymieniony.

Ponieważ wyszukiwanie według identyfikatora jest najprostszą i najwygodniejszą metodą, jest często stosowane. Jeśli w skrypcie trzeba pracować z jakimś elementem, wówczas atrybut id jest ustawiany na ten element w kodzie strony, nawet jeśli nie został wcześniej ustawiony. I znajdują element według identyfikatora.

Szukaj według klasy

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

dokument.getElementsByClassName(klasa)

Opcje:

class - klasa elementów do znalezienia

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 uzyskać dostęp 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ę. Część elementów umieścimy wewnątrz utworzonego wcześniej bloku. Drugą część stworzymy poza blokiem. Znaczenie tego stanie się jasne nieco później. Teraz strona będzie wyglądać następująco:

Kod HTML:

JavaScript:

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

Szukaj według tagu

Metoda getElementsByTagName() wyszukuje wszystkie elementy posiadające określony znacznik. Zwraca również pseudotablicę ze znalezionymi elementami.

dokument.getElementsByTagName(tag)

Opcje:

tag - znacznik szukanych elementów

Znajdźmy wszystkie tagi p, które znajdują się na stronie:

var p = document.getElementsByTagName("p"); konsola.log(p);

Metodę tę można również zastosować nie do całego dokumentu, ale do konkretnego elementu. Znajdź wszystkie znaczniki p w bloku.

Szukaj według selektora

Istnieją metody querySelector() i querySelectorAll(), które znajdują elementy pasujące do określonego 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. Metody te nie mają nic wspólnego z CSS. Metoda querySelectorAll() wyszukuje wszystkie elementy pasujące do selektora. Metoda querySelector() znajduje jeden element, który jest pierwszym w kodzie strony. Metody te mogą zastąpić wszystkie omówione wcześniej metody wyszukiwania elementów, ponieważ istnieje selektor po id, selektor po tagu i wiele innych.

document.querySelector(selektor)

document.querySelectorAll(selektor)

Selektory są napisane dokładnie tak samo jak w CSS, tylko nie zapomnij o cudzysłowie.

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 na stronie jest tylko jeden. Dlatego w tym przypadku wygodniej jest skorzystać z metody querySelector(). Jednak korzystając z tej metody trzeba liczyć się z tym, że te same elementy można w przyszłości dodać do strony. Dotyczy to jednak większości metod.

Kod HTML:

Metody te mogą również wyszukiwać elementy nie w całym dokumencie, ale w obrębie określonego elementu.

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

Elementy sąsiadujące

Możesz znaleźć sąsiadów znalezionego elementu. Każdy element jest obiektem, a dostęp do sąsiadujących elementów można uzyskać poprzez właściwości tego obiektu. Właściwość poprzedniElementSibling zawiera poprzedni element, a właściwość nextElementSibling zawiera następny element.

element.poprzedniElementRodzeństwo

element.nextElementRodzeństwo

Znajdźmy element następujący po bloku:

Elementy podrzędne

Właściwość dzieci zawiera tablicę elementów podrzędnych.

element.dzieci

Znajdźmy elementy podrzędne blok.

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

Jeśli chcesz uzyskać dostęp do elementu nie posiadającego identyfikatora, możesz użyj querySelector(), aby znaleźć element za pomocą dowolnego selektora.

Składnia var element = dokument .getElementById(id); Parametry id Identyfikator elementu do zlokalizowania. Identyfikator to ciąg znaków, w którym rozróżniana jest wielkość liter, który jest unikalny w obrębie dokumentu; tylko jeden element może mieć dowolny identyfikator. Wartość zwracana

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

Przykładowy przykład HTML getElementById

Tutaj jakiś tekst

niebieski czerwony Funkcja JavaScript ChangeColor(newColor) ( var elem = document.getElementById("para"); elem.style.color = newColor; ) Wynik Uwagi dotyczące użycia

Wielka litera „Id” w nazwie tej metody musieć być poprawny, aby kod działał; getElementByID() jest nie ważne i nie zadziała, niezależnie od tego, jak naturalne może się to wydawać.

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

Przykładowy dokument

cześć, słowo 1

cześć, słowo 2

cześć, słowo 3

cześć słowo 4

var parentDOM = document.getElementById("id-rodzica"); var test1 = nadrzędnaDOM.getElementById("test1"); //błąd zgłoszenia //Nieprzechwycony błąd typu: parentDOM.getElementById nie jest funkcją

Jeśli nie ma elementu o podanym identyfikatorze, funkcja ta zwraca wartość null. Należy pamiętać, że w parametrze id rozróżniana jest wielkość liter, więc document.getElementById("M ain") zwróci wartość null zamiast elementu, ponieważ "M" i "m" są różne na potrzeby tej metody.

Elementy, których nie ma w dokumencie, nie są wyszukiwane przez funkcję 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() :

Element Var = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el będzie miał wartość null!

Dokumenty inne niż HTML. Implementacja DOM musi zawierać informację, które atrybuty są typu ID. Atrybuty o nazwie „id” nie są typu ID, chyba że tak zdefiniowano w DTD dokumentu. Atrybut id jest zdefiniowany jako atrybut typu ID w typowych przypadkach XHTML, XUL i innych. Implementacje, które nie wiedzą, czy Oczekuje się, że atrybuty są typu ID lub nie zwrócą null .

Specyfikacja Specyfikacja Stan Komentarz

Specyfikacja modelu obiektowego dokumentu (DOM) poziomu 1	Przestarzały	Wstępna definicja interfejsu
Specyfikacja podstawowa modelu obiektowego dokumentu (DOM) poziomu 2 Definicja „getElementById” w tej specyfikacji.	Przestarzały	Zastąp DOM 1
Specyfikacja podstawowa modelu obiektowego dokumentu (DOM) poziomu 3 Definicja „getElementById” w tej specyfikacji.	Przestarzały	Zastąp DOM 2
DOM Definicja „getElementById” w tej specyfikacji.	Standard życia	Zamierza zastąpić DOM 3

Zgodność przeglądarki

Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz przyczynić się do gromadzenia danych, odwiedź https://github.com/mdn/browser-compat-data i wyślij nam prośbę o ściągnięcie.

Zaktualizuj dane dotyczące zgodności w GitHub

Komputer stacjonarny Chrome Edge Firefox Internet Explorer Opera Safari Przeglądarka internetowa na Androida Chrome na Androida Firefox na Androida Opera na Androida Safari na iOS Samsung InternetpobierzElementById

Pełna obsługa Chrome 1	Edge Pełne wsparcie 12	Pełna obsługa Firefoksa 1	IE Pełne wsparcie 5.5	Pełne wsparcie Opery 7	Safari Pełne wsparcie 1	WebView Android Pełna obsługa Tak	Chrome Android Pełna obsługa 18	Pełna obsługa przeglądarki Firefox Android Tak	Opera Android Pełna obsługa 10.1	Pełna obsługa Safari iOS 1	Internetowy Android z Samsungiem?

Legenda Pełne wsparcie Pełne wsparcie Zgodność nieznana Zgodność nieznana