Javascript i Jquery selektori. Odabir elementa prema id-u. Metoda GetElementById - Odabir elementa pomoću id identifikatora Traženje elementa na javascript stranici

U prošloj lekciji pogledali smo metodu getElementsByTagName, koja vraća niz ( skupina) elementi stranice prema nazivu oznake.

Nastavlja se ovdje praktični rad s javascriptom i metodom getElementById koja vraća vezu na element, fokusirajući se na njegovu jedinstveni identifikator iskaznica.

Metoda getElementById, kao i getElementsByTagName, metoda je objekta dokumenta.

Naziv metode je doslovno preveden: dobiti element po id-u.

Bilo koji element ( tegu) web dokumentu se može dodijeliti vlastiti ID, zahvaljujući kojem element postaje jedinstven i može mu se pristupiti radi rada s njim.

Napomena: u nazivu metode nema slova s ​​na kraju riječi Element ( za razliku od metode getElementsByTagName). Ovo je učinjeno radi praktičnosti i označava da se metoda koristi za odabir elementa.

/* Dodajte vezu na img oznaku koristeći ID pingvina jedinstvenoj varijabli */

Malo pojašnjenje za gornji isječak koda...

• img oznaka ( slike e) ima identifikator pingvina;
• korištenjem getElementById metode, ova posebna img oznaka je odabrana identifikatorom pingvina;
• jedinstvena varijabla sadrži vezu na odabranu oznaku;
• Zatim možete raditi s oznakom kao s objektom putem jedinstvene varijable, baš kao što ste radili s objektom Datum preko proizvoljne varijable.

Nakon pristupa elementu ( tegu) web stranice prema id-u pomoću metode getElementById, već radimo s njom kao s objektom, što znači da dobivamo pristup atributima oznake kao svojstvima objekta.

Stoga su vrijednosti atributa već vrijednosti svojstava.

Nastavimo s prethodnim primjerom...

"Zamišljeni pingvin" >

var unique = document .getElementById ( "pingvin");

upozorenje(jedinstveno.alt); /* Prikaz vrijednosti svojstva alt jedinstvenog objekta (vrijednost atributa alt img oznake) */

Objašnjenja za primjer koda...

• img oznaka ( slike e) ima određene atribute: src - adresa datoteke, width and height - širina i visina slike, alt - alternativni tekst;
• Pristupom oznaci korištenjem getElementById metode kao objekta, pristupamo atributima oznake kao svojstvima objekta;
• A vrijednosti atributa sada su vrijednosti svojstava;
• U javascriptu se svojstvima objekta pristupa kroz točku. Zatim prikazujemo alt - alternativni tekst img oznake pomoću metode upozorenja na zaslonu.

Nadam se da vas sve ovo nije zbunilo. Morate razumjeti istovremeno što se događa na razini javascript programa i na razini označavanja dokumenta.

Oznaka img je jedinstveni objekt;

Atributi oznake width i alt su svojstva Objekta;

Vrijednosti atributa "128" i "Thoughtful Penguin" su vrijednosti svojstava;

// Evo kako to izgleda iz javascript perspektive:

jedinstvena var = (

širina: "128",

alt : "Zamišljeni pingvin"

}

Ovako radi metoda getElementById, koja vraća vezu na bilo koji element ( označiti) web stranica, ako ima jedinstveni identifikator ID. Zatim, radimo s ovim elementom na razini javascripta kao objektom...

Imajte na umu da: kao u prethodnoj lekciji, ovdje - kada radite s metodom getElementById, pozivni redak skripte treba biti postavljen na kraj html dokumenta

jQuery ima druge opcije za odabir elemenata u web dokumentu.

Zadatak s kojim se vrlo često susreću početnici JavaScript programeri je odabir elementa na web stranici prema njegovom id atributu.

Recimo da imamo kod na stranici.

Blokiraj sadržaj.

Kako možete odabrati element s id="elem" i izvršiti niz akcija s njim?

Postoji nekoliko opcija za rješavanje problema. Pogledajmo ih sada.

Opcija 1: Koristite metodu Javascript getElementById.

Postoji način pristupa elementu pomoću njegovog ID-a pomoću "čistog" javascript koda, bez korištenja biblioteka treće strane. Ova metoda koristi metodu ggetElementById(“element_id”). Dakle, elementu koji nam treba pristupamo preko njegovog ID-a.

Pogledajmo kako to funkcionira na jednostavnom primjeru.

Blokiraj sadržaj. upozorenje(document.getElementById("elem").innerHTML);

Imajte na umu da se ove linije koda (skripte) nalaze ispod samog elementa. Ovo je preduvjet za rad ove skripte, jer... Javascript kôd se izvršava dok se stranica učitava. Ako postavimo gornji kod, pristupit ćemo elementu na stranici koji se još nije učitao, tj. još neće biti u kodu u vrijeme kada se skripta izvršava. Postoje načini da se to izbjegne, ali to je izvan dosega ovog članka.

Kao rezultat toga, ako sve radi ispravno, dobit ćemo skočni prozor. Ovaj prozor će prikazati tekst koji se nalazi unutar div bloka.

Pogledajmo sada kako ovaj problem možemo riješiti na drugi način.

Opcija 2. Korištenje biblioteke Jquery.

Druga opcija za odabir elementa prema ID-u je korištenje biblioteke Jquery. U praksi se u suvremenim skriptama najčešće koristi ovaj način. Mnogo je praktičniji i lakši za pamćenje.

Kako biste se pozvali na element prema njegovom ID-u, trebate koristiti sljedeću konstrukciju:

$("#elem")

Ovdje je elem ime sadržano u atributu id.

Jer Koristit ćemo Javascript biblioteku treće strane koja se zove Jquery, a onda se ta biblioteka prvo mora uključiti.

Dodaje se u odjeljak, jedan od načina na koji se to može učiniti je dodavanje sljedećeg retka koda:

Da bi se biblioteka mogla učitati mora postojati internetska veza.

Blokiraj sadržaj. upozorenje($("#elem").html());

Sama skripta, kao u prethodnom primjeru, trebala bi se nalaziti ispod koda elementa s kojim želite komunicirati.

Stoga smo raspravljali o dva načina kako možete odabrati element na web stranici prema njegovom id atributu i komunicirati s njim. Odaberite metodu koja vam odgovara i primijenite je u praksi.

Zadnja izmjena: 1.11.2015

Za rad s DOM strukturom u JavaScriptu koristi se objekt dokumenta koji je definiran u objektu globalnog prozora. Objekt dokumenta pruža niz svojstava i metoda za upravljanje elementima stranice.

Traženje elemenata

Za traženje elemenata na stranici koriste se sljedeće metode:

getElementById(value) : odabire element čiji je id atribut vrijednost

getElementsByTagName(value) : odabire sve elemente čija je oznaka vrijednost

getElementsByClassName(value) : odabire sve elemente koji imaju vrijednost klase

querySelector(value) : odabire prvi element koji odgovara vrijednosti css selektora

querySelectorAll(value) : odabire sve elemente koji odgovaraju vrijednosti css selektora

Na primjer, pronađimo element prema ID-u:

Zaglavlje bloka var headerElement = document.getElementById("zaglavlje"); document.write("Tekst zaglavlja: " + headerElement.innerText);

Pomoću poziva document.getElementById("header") nalazimo element s id="header". I pomoću svojstva innerText možete dobiti tekst pronađenog elementa.

Traži po određenoj oznaci:

Naslov

Prvi paragraf

Drugi paragraf

var pElements = document.getElementsByTagName("p"); za (var i = 0; i< pElements.length; i++) { document.write("Текст параграфа: " + pElements[i].innerText + "
"); }

Pomoću poziva document.getElementsByTagName("p") pronalazimo sve elemente paragrafa. Ovaj poziv vraća niz pronađenih elemenata. Stoga, da biste dobili pojedinačni elementi niz, morate ih proći kroz petlju.

Ako trebamo dobiti samo prvi element, tada možemo pristupiti prvom elementu pronađene kolekcije objekata:

Var pElement = document.getElementsByTagName("p"); document.write("Tekst odlomka: " + pElement.innerText);

Dobivanje elementa po klasi:

Naslov članka

Prvi paragraf

Drugi paragraf

var articleDiv = document.getElementsByClassName("članak"); console.log(articleDiv); var textElems = document.getElementsByClassName("tekst"); za (var i = 0; i< textElems.length; i++) { console.log(textElems[i]); }

Odabir pomoću css selektora:

Sažetak članka

Prvi paragraf

Drugi paragraf

var elem = document.querySelector(".annotation p"); document.write("Selektor teksta: " + elem.innerText);

Izraz document.querySelector(".annotation p") pronalazi element koji odgovara selektoru.annotation p . Ako postoji nekoliko elemenata na stranici koji odgovaraju selektoru, metoda će odabrati prvi. Kao rezultat, preglednik će prikazati:

Sažetak članka Prvi odlomak Drugi odlomak Tekst za odabir: Sažetak članka

Da biste dobili sve elemente za selektor, možete koristiti metodu document.querySelectorAll na sličan način, koja vraća niz pronađenih elemenata:

Sažetak članka

Prvi paragraf

Drugi paragraf

var elems = document.querySelectorAll(".text p"); za (var i = 0; i< elems.length; i++) { document.write("Текст селектора " + i + ": " + elems[i].innerText + "
"); }

Ispis preglednika:

Sažetak članka Prvi odlomak Drugi odlomak Tekst za odabir 0: Prvi odlomak Tekst za odabir 1: Drugi odlomak

Svojstvo odgovara navedenom nizu. Budući da ID-ovi elemenata moraju biti jedinstveni ako su navedeni, oni su koristan način da se brzo pristupi određenom elementu.

Ako trebate dobiti pristup elementu koji nema ID, možete koristiti querySelector() da pronađete element pomoću bilo kojeg selektora.

Sintaksa var element = dokument .getElementById(id); Parametri id ID elementa koji treba locirati. ID je niz koji razlikuje velika i mala slova i jedinstven je unutar dokumenta; samo jedan element može imati bilo koji ID. Povratna vrijednost

Objekt Element koji opisuje objekt DOM elementa koji odgovara navedenom ID-u ili null ako u dokumentu nije pronađen odgovarajući element.

Primjer primjera HTML getElementById

Neki tekst ovdje

plava crvena JavaScript funkcija changeColor(newColor) ( var elem = document.getElementById("para"); elem.style.color = newColor; ) Rezultat Napomene o korištenju

Velika slova "Id" u nazivu ove metode mora biti ispravan kako bi kod funkcionirao; getElementByID() je ne vrijedi i neće djelovati, koliko god prirodno izgledalo.

Za razliku od nekih drugih metoda traženja elemenata kao što su Document.querySelector() i Document.querySelectorAll(), getElementById() je dostupan samo kao metoda globalnog objekta dokumenta, i ne dostupan kao metoda na svim objektima elemenata u DOM-u. Budući da vrijednosti ID-a moraju biti jedinstvene u cijelom dokumentu, nema potrebe za "lokalnim" verzijama funkcije.

Primjer dokumenta

pozdrav riječ1

pozdrav riječ2

pozdrav riječ3

pozdrav riječ4

var parentDOM = document.getElementById("roditelj-id"); var test1 = parentDOM.getElementById("test1"); //izbaci pogrešku //Uncaught TypeError: parentDOM.getElementById nije funkcija

Ako ne postoji element s danim ID-om, ova funkcija vraća null. Imajte na umu da parametar id razlikuje velika i mala slova, pa će document.getElementById("M ain") vratiti null umjesto elementa jer su "M" i "m" različiti za potrebe ove metode.

Elementi koji nisu u dokumentu ne pretražuju se getElementById() . Kada stvarate element i dodjeljujete mu ID, morate umetnuti element u stablo dokumenta pomoću ili sličnom metodom prije nego što mu možete pristupiti pomoću getElementById() :

Var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el će biti nula!

Dokumenti koji nisu HTML. Implementacija DOM-a mora imati informacije koje govore koji su atributi tipa ID. Atributi s imenom "id" nisu tipa ID osim ako nije definirano u DTD-u dokumenta. Atribut id definiran je kao ID tipa u uobičajenim slučajevima XHTML-a, XUL-a i drugih. Implementacije koje ne znaju jesu li atributi jesu li tipa ID ili ne, očekuje se da vrate null.

Specifikacija Komentar statusa specifikacije

Document Object Model (DOM) Specifikacija razine 1	Zastario	Početna definicija za sučelje
Temeljna specifikacija razine 2 modela objekta dokumenta (DOM). Definicija "getElementById" u toj specifikaciji.	Zastario	Zamijeni DOM 1
Temeljna specifikacija razine 3 modela objekta dokumenta (DOM). Definicija "getElementById" u toj specifikaciji.	Zastario	Zamijeni DOM 2
DOM Definicija "getElementById" u toj specifikaciji.	Životni standard	Namjeravam zamijeniti DOM 3

Kompatibilnost preglednika

Tablica kompatibilnosti na ovoj stranici generirana je iz strukturiranih podataka. Ako želite doprinijeti podacima, pogledajte https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenje.

Ažurirajte podatke o kompatibilnosti na GitHubu

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome za Android Firefox za Android Opera za Android Safari na iOS-u Samsung InternetgetElementById

Puna podrška za Chrome 1	Edge Potpuna podrška 12	Firefox Puna podrška 1	IE Puna podrška 5.5	Opera puna podrška 7	Safari puna podrška 1	WebView Android Puna podrška Da	Chrome Android Puna podrška 18	Firefox Android Puna podrška Da	Opera Android Puna podrška 10.1	Safari iOS Potpuna podrška 1	Samsung Internet Android ?

Legenda Puna podrška Puna podrška Kompatibilnost nepoznata Kompatibilnost nepoznata

Standard DOM nudi nekoliko načina za pronalaženje elementa. Ove metode su getElementById, getElementsByTagName i getElementsByName.

JavaScript biblioteke nude moćnije metode pretraživanja.

Traži po ID-u

Najprikladniji način da pronađete element u DOM-u je da ga dobijete po ID-u. Da biste to učinili, upotrijebite poziv document.getElementById(id)

Na primjer, sljedeći kod će promijeniti boju teksta u plavu u div "e c id="dataKeeper":

Document.getElementById("dataKeeper").style.color = "plavo"

Traži po oznaci

Sljedeći način je nabaviti sve elemente s određenom oznakom i među njima tražiti onaj koji vam treba. Za to se koristi Document.getElementsByTagName(tag). Vraća niz elemenata koji imaju tu oznaku.

Na primjer, možete dobiti drugi element (numeriranje u nizu počinje od nule) s oznakom li:

Document.getElementsByTagName("LI")

Zanimljivo, getElementsByTagName se može pozvati ne samo za dokument, već općenito za bilo koji element koji ima oznaku (ne tekst).

U tom slučaju će se pronaći samo oni objekti koji se nalaze ispod ovog elementa.

Na primjer, sljedeći poziv dobiva popis LI elemenata koji se nalaze unutar prve div oznake:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

Uzmite svu djecu

Pozivanje elem.getElementsByTagName("*") vratit će popis svih potomaka čvora elem redoslijedom kojim se hoda.

Na primjer, na ovom DOM-u:

Ovaj kod:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i