Za dobivanje se koristi Javascript metoda dokumenta getelementbyid. JavaScript - DOM: metode za pronalaženje čvorova. Je li polje prazno

Osim što web stranicama dopuštamo da odaberu elemente prema svom ID-u, također možemo odabrati elemente prema njihovom atributu klase.

Zadatak je također vrlo čest. Kada pišem svoje skripte, moram vrlo često koristiti ovaj selektor.

Recimo da imamo sljedeći kod na stranici.

Blokirajte sadržaj.

Zadatak je jednostavan, potrebno je odabrati element s class = "elem" i izvršiti neke radnje s njim koristeći Javascript.

Pogledajmo nekoliko opcija kako se to može učiniti.

Opcija 1: koristite metodu Javascript getElementsByClassName.

Ako ne koristite dodatne knjižnice, tada možete pristupiti elementu pomoću metode getElementsByClassName("class_name").

Na primjer, u odnosu na izvorni kod, možete dodati sljedeće retke koda.

Blokirajte sadržaj.

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

Imajte na umu da će rezultat metode getElementsByClassName biti niz elemenata. Na stranici može biti nekoliko elemenata s istom klasom.

Zato na kraju konstrukcije document.getElementsByClassName("elem") morate naznačiti da je prikazan nulti element niza (). Brojanje u Javascriptu počinje od nule, a ne od jedinice.

Ali problem s korištenjem metode getElementsByClassName je taj što ova metoda nije podržana u starijim verzijama preglednika.

Postoje neki trikovi da to zaobiđete, ali to je suvišan kod. Na primjer, možete koristiti regularne izraze:

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

Ovo je jedan od načina rješavanja problema. No, da budem iskren, nije mi baš prihvatljivo začepiti stranicu nepotrebnim kodom, pa najčešće koristim drugo rješenje problema.

Opcija 2. Korištenje biblioteke Jquery.

Korištenje Jquery biblioteke znatno olakšava rješavanje problema odabira elemenata prema njihovom atributu klase. Trebate koristiti konstrukciju:

$(".elem")

Ovdje je elem naziv klase dodijeljen elementu.

Morate imati na umu da kako bi ovo funkcioniralo, najprije mora biti uključena Jquery biblioteka. Dodaje se u odjeljku , jedan od načina da to učinite je dodavanje sljedećeg retka koda:

Da bi se knjižnica mogla učitati, mora postojati internetska veza.

Pogledajmo kako to funkcionira na primjeru.

Blokirajte sadržaj.

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

Dakle, postoje dva načina na koja možete komunicirati s elementima koji imaju postavljen atribut klase. Odaberite onaj koji vam najviše odgovara i upotrijebite ga u praksi.

Da bi skripta radila s nekim elementom stranice, ovaj element se najprije mora pronaći. Postoji nekoliko načina da to učinite u JavaScriptu. Pronađeni element obično se dodjeljuje varijabli, a kasnije, preko te varijable, skripta pristupa elementu i s njim izvodi neke radnje.

Traži po ID-u

Ako je elementu dodan atribut id u kodu stranice, tada se element može pronaći po id-u. Ovo je najlakši način. Element se traži pomoću metode getElementById() globalnog objekta dokumenta.

document.getElementById(id)

Opcije:

id - id elementa koji treba pronaći. id je niz, pa mora biti u navodnicima.

Kreirajmo stranicu, dodajmo joj element i damo joj id i pronađimo ovaj element u skripti:

HTML kod:

JavaScript:

var block = document.getElementById("blok"); dnevnik konzole (blok);

Pronađeni element smo dodijelili varijabli bloka i prikazali varijablu u konzoli. Otvorite konzolu preglednika, ona bi trebala sadržavati element.

Budući da je pretraživanje po ID-u najlakši i najprikladniji način, često se koristi. Ako trebate raditi s nekim elementom u skripti, tada se atribut id postavlja za ovaj element u kodu stranice, čak i ako prije nije postavljen. I pronađite element po id.

Traži po razredu

Metoda getElementsByClassName() omogućuje vam da pronađete sve elemente koji pripadaju određenoj klasi.

document.getElementsByClassName(klasa)

Opcije:

class - klasa elemenata koje treba pronaći

Metoda vraća pseudo-niz koji sadrži pronađene elemente. Zove se pseudo-niz jer mnoge metode niza ne rade za njega. Ali glavno svojstvo ostaje - možete se pozvati na bilo koji element niza. Čak i ako se pronađe samo jedan element, on je još uvijek u nizu.

Dodajmo elemente na stranicu i damo im klasu. Neki od elemenata bit će smješteni unutar bloka koji smo ranije kreirali. Drugi dio će biti kreiran izvan bloka. Značenje ovoga bit će jasno malo kasnije. Sada će stranica izgledati ovako:

HTML kod:

JavaScript:

Sada se nalaze samo oni elementi koji se nalaze u bloku.

Traži po oznaci

Metoda getElementsByTagName() pronalazi sve elemente s određenom oznakom. Također vraća pseudo-niz s pronađenim elementima.

document.getElementsByTagName (oznaka)

Opcije:

tag - oznaka elemenata koje treba pronaći

Pronađimo sve p oznake koje se nalaze na stranici:

var p = document.getElementsByTagName("p"); dnevnik konzole (p);

Ova metoda se također može primijeniti ne na cijeli dokument, već na određeni element. Pronađite sve p oznake u bloku.

Traži po biraču

Postoje metode querySelector() i querySelectorAll() koje pronalaze elemente koji odgovaraju danom selektoru. To jest, naći će se elementi na koje bi se stil primijenio da je bio specificiran takvom selektoru. Istodobno, prisutnost takvog selektora u stilu stranice uopće nije potrebna. Ove metode nemaju nikakve veze s CSS-om. Metoda querySelectorAll() pronalazi sve elemente koji odgovaraju selektoru. A metoda querySelector() pronalazi jedan element, koji je prvi element u kodu stranice. Ove metode mogu zamijeniti sve načine pronalaženja elemenata o kojima smo ranije govorili, jer postoji birač id-a, selektor oznaka i mnogi drugi.

document.querySelector(selektor)

document.querySelectorAll(selektor)

Selektori su napisani na isti način kao u CSS-u, samo ne zaboravite staviti navodnike.

Dodajmo popis na stranicu i pronađimo ga pomoću selektora. Tražimo samo jedan element i sigurno znamo da će to biti prvi, jer je jedini na stranici. Stoga je u ovom slučaju prikladnije koristiti metodu querySelector(). Ali kada koristite ovu metodu, morate uzeti u obzir da se isti elementi mogu dodati na stranicu u budućnosti. Međutim, to se odnosi na većinu metoda.

HTML kod:

Ove metode također mogu tražiti elemente ne u cijelom dokumentu, već unutar jednog elementa.

U primjeru smo koristili samo selektore po oznaci. Pokušajte pronaći elemente stranice pomoću drugih selektora.

Susjedni elementi

Za pronađeni element možete pronaći susjede. Svaki element je objekt, a susjedni elementi se mogu dobiti kroz svojstva ovog objekta. Svojstvo previousElementSibling sadrži prethodni element, a svojstvo nextElementSibling sadrži sljedeći element.

element.previousElementSibling

element.nextElementSibling

Pronađite element nakon bloka:

Dječji elementi

Svojstvo djece sadrži niz djece.

element.djeca

Pronađite podređene elemente bloka.


NA posljednja lekcija pokrila je metodu getElementsByTagName, koja vraća niz ( skupina) elemente stranice prema nazivu oznake.

Ovdje se nastavlja praktični rad s javascriptom i razmatrat će se metoda getElementById, koja vraća referencu na element, na temelju svog jedinstvenog id .

getElementById metoda poput getElementsByTagName je metoda objekta dokumenta.

Naziv metode doslovno je preveden: dobiti element po id.

Bilo koji element ( tegu) web dokumenta može se dodijeliti vlastiti id - identifikator, zahvaljujući kojem element postaje jedinstven i možete mu pristupiti da biste radili s njim.

obratiti pažnju e: nema s u nazivu metode na kraju riječi Element ( za razliku od metode getElementsByTagName ). Ovo je radi praktičnosti i označava da se metoda koristi za odabir elementa.

Malo objašnjenja za gornji isječak koda...

  • img oznaka ( slike f) ima id - identifikator pingvina;
  • korištenjem metode getElementById, ovu img oznaku odabire identifikator pingvina;
  • u varijablu jedinstvena link je upisan na odabranu oznaku;
  • tada možete raditi s oznakom, kao kod objekta kroz varijablu jedinstven, sličan onome kako smo mi radili Objekt datuma kroz proizvoljnu varijablu.

Nakon pristupa elementu ( tegu) web stranicu po id 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">

Objašnjenja za primjer koda...

  • img oznaka ( slike e) ima određene atributima: src - adresa datoteke, širina i visina - širina i visina slike, alt - alternativni tekst;
  • nakon što smo pristupili oznaci pomoću metode getElementById kao objekta, dobivamo pristup atributima oznake, kako objektirati svojstva;
  • ALI vrijednosti atributa su sada vrijednosti imovine;
  • u javascriptu se svojstvima objekta pristupa kroz točku. Zatim prikazujemo alt - alternativni tekst oznake img koja se koristi metoda upozorenja na ekran.

Nadam se da vas sve ovo ne zbuni. U isto vrijeme morate razumjeti što se događa na razini javascript programa i na razini označavanja dokumenta.

Oznaka img je jedinstveni objekt;

Atributi širine i alt oznake svojstva su Objekta;

Vrijednosti atributa "128" i "Zamišljeni pingvin" su vrijednosti imovine;

// Evo kako to izgleda iz javascript perspektive:

var jedinstvena = (

širina: "128" ,

alt : "Zamišljeni pingvin"

}

Ovako radi metoda getElementById koja vraća referencu na bilo koji element ( označiti) web stranice ako ima jedinstveni id. Zatim radimo s ovim elementom na razini javascripta. kao s predmetom...

Treba uzeti u obzir da: Kao u prethodna lekcija, ovdje - kada radite s metodom getElementById, redak poziva skripte treba staviti na kraj html dokumenta

jQuery pruža druge opcije za odabir elemenata web dokumenta.

Posljednje ažuriranje: 1.11.2015

Za rad s DOM strukturom u JavaScriptu, objekt dokumenta je definiran u globalnom objektu prozora. Objekt dokumenta pruža niz svojstava i metoda za manipuliranje elementima stranice.

Potražite elemente

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

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

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

    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 po ID-u:

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

Pretraživanje po određenoj oznaci:

Zaglavlje

Prvi odlomak

Drugi stavak

Pozivanjem document.getElementsByTagName("p") nalazimo sve elemente odlomka. Ovaj poziv vraća niz pronađenih elemenata. Stoga, da bi se dobili pojedinačni elementi niza, potrebno je proći kroz njih u petlji.

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

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

Dobivanje elementa po klasi:

Naslov članka

Prvi odlomak

Drugi stavak

Odaberite pomoću css selektora:

Sažetak članka

Prvi odlomak

Drugi stavak

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

Bilješka članka Prvi odlomak Drugi odlomak Tekst odabira: Bilješka članka

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

Sažetak članka

Prvi odlomak

Drugi stavak

Izlaz preglednika:

Bilješka članka Prvi odlomak Drugi odlomak Tekst za odabir 0: Prvi odlomak Tekst za odabir 1: Drugi odlomak