Pentru a obține documentul cu metoda Javascript getelementbyid este folosit. JavaScript - DOM: metode de găsire a nodurilor. Câmpul este gol

Pe lângă faptul că permitem paginilor web să selecteze elemente după id-ul lor, putem selecta și elemente după atributul lor de clasă.

Sarcina este, de asemenea, foarte comună. Când îmi scriu scripturile, trebuie să folosesc acest selector foarte des.

Să presupunem că avem următorul cod pe o pagină.

Blocați conținutul.

Sarcina este simplă, trebuie să selectați un element cu class = „elem” și să efectuați unele acțiuni cu acesta folosind Javascript.

Să ne uităm la câteva opțiuni despre cum se poate face acest lucru.

Opțiunea 1: Utilizați metoda Javascript getElementsByClassName.

Dacă nu utilizați biblioteci suplimentare, atunci puteți accesa elementul folosind metoda getElementsByClassName("class_name").

De exemplu, în legătură cu codul sursă, puteți adăuga următoarele linii de cod.

Blocați conținutul.

Ca urmare, dacă totul funcționează corect, vom obține o fereastră pop-up în care va fi afișat textul care se află în interiorul blocului div.

Vă rugăm să rețineți că rezultatul metodei getElementsByClassName va fi o matrice de elemente. Pot exista mai multe elemente cu aceeași clasă pe pagină.

De aceea, la sfârșitul construcției document.getElementsByClassName("elem"), trebuie să indicați că este afișat elementul zero al matricei (). Numărarea în Javascript începe de la zero, nu de la unu.

Dar problema cu utilizarea metodei getElementsByClassName este că această metodă nu este acceptată în versiunile mai vechi de browsere.

Există câteva trucuri pentru a ocoli acest lucru, dar este un cod redundant. De exemplu, puteți folosi expresii regulate:

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

Aceasta este o modalitate de a rezolva problema. Dar, să fiu sincer, nu este foarte acceptabil pentru mine să înfund pagina cu cod inutil, așa că cel mai adesea folosesc a doua soluție la problemă.

Opțiunea 2. Utilizarea bibliotecii Jquery.

Folosirea bibliotecii Jquery face mult mai ușor să rezolvi problema selectării elementelor după atributul lor de clasă. Trebuie să utilizați constructul:

$(".elem")

Aici elem este numele clasei atribuit elementului.

Trebuie amintit că, pentru ca acest lucru să funcționeze, mai întâi trebuie inclusă biblioteca Jquery. Se adauga in sectiune , o modalitate de a face acest lucru este să adăugați următoarea linie de cod:

Pentru ca biblioteca să fie încărcată, trebuie să existe o conexiune la Internet.

Să vedem cum funcționează asta cu un exemplu.

Blocați conținutul.

Scriptul în sine, ca în exemplul anterior, ar trebui să fie sub codul elementului cu care doriți să interacționați.

Astfel, există două moduri prin care puteți interacționa cu elementele care au atributul de clasă setat. Alege-l pe cel care ti se potriveste cel mai bine si foloseste-l in practica.

Pentru ca scriptul să funcționeze cu un element al paginii, acest element trebuie mai întâi găsit. Există mai multe moduri de a face acest lucru în JavaScript. Elementul găsit este de obicei atribuit unei variabile, iar ulterior, prin această variabilă, scriptul accesează elementul și efectuează unele acțiuni cu acesta.

Căutați după id

Dacă elementului i se dă un atribut id în codul paginii, atunci elementul poate fi găsit prin id. Acesta este cel mai simplu mod. Elementul este căutat folosind metoda getElementById() a obiectului global al documentului.

document.getElementById(id)

Parametri:

id - id-ul elementului de găsit. id este un șir, deci trebuie să fie între ghilimele.

Să creăm o pagină, să îi adăugăm un element și să îi dăm un id și să găsim acest element în script:

Cod HTML:

JavaScript:

var block = document.getElementById("bloc"); jurnalul consolei(bloc);

Am atribuit elementul găsit variabilei bloc și am afișat variabila în consolă. Deschideți consola browserului, ar trebui să conțină elementul.

Deoarece căutarea după id este cea mai ușoară și mai convenabilă modalitate, este adesea folosită. Dacă trebuie să lucrați cu un element dintr-un script, atunci atributul id este setat pentru acest element în codul paginii, chiar dacă nu a fost setat înainte. Și găsiți elementul după id.

Căutați după clasă

Metoda getElementsByClassName() vă permite să găsiți toate elementele care aparțin unei anumite clase.

document.getElementsByClassName(clasă)

Parametri:

clasă - clasă de elemente de găsit

Metoda returnează o pseudo-matrice care conține elementele găsite. Se numește pseudo-matrice deoarece multe metode de matrice nu funcționează pentru el. Dar proprietatea principală rămâne - vă puteți referi la orice element al matricei. Chiar dacă se găsește un singur element, acesta este încă în matrice.

Să adăugăm elemente în pagină și să le dăm o clasă. Unele dintre elemente vor fi plasate în interiorul blocului pe care l-am creat mai devreme. Cealaltă parte va fi creată în afara blocului. Sensul acestui lucru va deveni clar puțin mai târziu. Acum pagina va arăta astfel:

Cod HTML:

JavaScript:

Acum sunt găsite doar acele elemente care se află în bloc.

Căutați după etichetă

Metoda getElementsByTagName() găsește toate elementele cu o etichetă specifică. De asemenea, returnează o pseudo-matrice cu elementele găsite.

document.getElementsByTagName (etichetă)

Parametri:

tag - etichetă a elementelor de găsit

Să găsim toate etichetele p care sunt pe pagină:

var p = document.getElementsByTagName("p"); jurnalul consolei(p);

Această metodă poate fi aplicată nu întregului document, ci unui anumit element. Găsiți toate etichetele p din bloc.

Căutați după selector

Există metode querySelector() și querySelectorAll() care găsesc elemente care se potrivesc cu un anumit selector. Adică se vor găsi elemente cărora li s-ar fi aplicat stilul dacă ar fi fost specificat unui astfel de selector. În același timp, prezența unui astfel de selector în stilul paginii nu este deloc necesară. Aceste metode nu au nimic de-a face cu CSS. Metoda querySelectorAll() găsește toate elementele care se potrivesc cu selectorul. Și metoda querySelector() găsește un element, care este primul element din codul paginii. Aceste metode pot înlocui toate modalitățile de a găsi elemente discutate mai devreme, deoarece există un selector de id, un selector de etichete și multe altele.

document.querySelector(selector)

document.querySelectorAll(selector)

Selectoarele sunt scrise la fel ca în CSS, doar nu uitați să puneți ghilimele.

Să adăugăm o listă la pagină și să o găsim de selector. Cautam un singur element si stim sigur ca va fi primul, pentru ca este singurul de pe pagina. Prin urmare, în acest caz este mai convenabil să folosiți metoda querySelector(). Dar atunci când utilizați această metodă, trebuie să țineți cont de faptul că aceleași elemente pot fi adăugate pe pagină în viitor. Cu toate acestea, acest lucru se aplică majorității metodelor.

Cod HTML:

Aceste metode pot căuta și elemente nu în întregul document, ci într-un singur element.

În exemplu, am folosit doar selectoare după etichetă. Încercați să găsiți elemente de pagină folosind alți selectori.

Elemente adiacente

Pentru elementul găsit, puteți găsi vecini. Fiecare element este un obiect, iar elementele învecinate pot fi obținute prin proprietățile acestui obiect. Proprietatea previousElementSibling conține elementul anterior, iar proprietatea nextElementSibling conține elementul următor.

element.previousElementFrate

element.nextElementFrate

Găsiți elementul care urmează blocului:

Elemente copil

Proprietatea children conține o serie de copii.

element.copii

Găsiți elementele copil ale blocului.


ÎN ultima lecție a acoperit metoda getElementsByTagName, care returnează o matrice ( grup) elemente de pagină după numele etichetei.

Aici lucrarea practică cu javascript continuă și se va lua în considerare metoda getElementById, care returnează o referință la un element, pe baza ID-ului său unic.

metoda getElementById ca getElementsByTagName este o metodă a obiectului document.

Numele metodei este tradus literal: obține elementul după id.

Orice element ( tegu) unui document web i se poate atribui propriul id - identificator, datorită căruia elementul devine unicși îl puteți accesa pentru a lucra cu el.

fiți atenți e: nu există s în numele metodei la sfârșitul cuvântului Element ( spre deosebire de metoda getElementsByTagName ). Acest lucru este pentru comoditate și indică faptul că metoda este utilizată pentru a selecta elementul.

Câteva explicații pentru fragmentul de cod de mai sus...

  • etichetă img ( imagini f) are id - pinguinul identificator;
  • folosind metoda getElementById, această etichetă img este selectată de identificatorul pinguin;
  • într-o variabilă unic link-ul este introdus la eticheta selectată;
  • atunci poți lucra cu eticheta, ca la un obiect printr-o variabilă unic, asemănător cu modul în care am lucrat Data obiect printr-o variabilă arbitrară.

După accesarea elementului ( tegu) pagină web prin id folosind metoda getElementById, lucrăm deja cu ea ca și cu un Object, ceea ce înseamnă că obținem acces la atributele etichetei ca proprietăți ale obiectului.

Prin urmare, valorile atributelor sunt deja valori ale proprietăților.

Să continuăm cu exemplul anterior...

"Penguin Penguin">

Explicații pentru codul exemplu...

  • etichetă img ( imagini e) are anumite atribute: src - adresa fișierului, lățime și înălțime - lățimea și înălțimea imaginii, alt - text alternativ;
  • după ce am accesat eticheta folosind metoda getElementById ca obiect, obținem acces la atributele etichetei, cum să obiectezi proprietățile;
  • DAR valorile atributelor sunt acum valorile proprietatii;
  • în javascript, proprietățile obiectului sunt accesate printr-un punct. Apoi, afișăm alt - textul alternativ al etichetei img folosind metoda de alerta la ecran.

Sper că nu ești derutat de toate acestea. Trebuie să înțelegeți în același timp ce se întâmplă la nivel de program javascript și la nivel de marcare a documentului.

Eticheta img este un Obiect unic;

Lățimea etichetei și atributele alt sunt proprietăți ale obiectului;

Valorile de atribut „128” și "Penguin Penguin" sunt valori de proprietate;

// Iată cum arată din perspectivă javascript:

var unic = (

latime: "128" ,

alt: "Penguin Penguin"

}

Acesta este modul în care funcționează metoda getElementById, returnând o referință la orice element ( etichetă) a paginii web dacă are un id unic . În continuare, lucrăm cu acest element la nivel de javascript. ca la un obiect...

Ar trebui luat în considerare faptul că: Ca în lecția anterioară, aici - atunci când lucrați cu metoda getElementById, linia de apel script ar trebui să fie plasată la sfârșitul documentului html

jQuery oferă alte opțiuni pentru selectarea elementelor unui document web.

Ultima actualizare: 1.11.2015

Pentru a lucra cu structura DOM în JavaScript, obiectul document este definit în obiectul fereastră globală. Obiectul document oferă o serie de proprietăți și metode pentru manipularea elementelor paginii.

Căutați elemente

Următoarele metode sunt utilizate pentru a căuta elemente pe o pagină:

    getElementById(value) : selectează elementul al cărui atribut id este egal cu value

    getElementsByTagName(valoare): selectează toate elementele a căror etichetă este egală cu valoare

    getElementsByClassName(valoare) : selectează toate elementele care au valoare de clasă

    querySelector(value) : selectează primul element care se potrivește cu valoarea selectorului css

    querySelectorAll(valoare): selectează toate elementele care se potrivesc cu valoarea selectorului css

De exemplu, să găsim un element după id:

Apelând document.getElementById("header") găsim elementul cu id="header". Și folosind proprietatea innerText, puteți obține textul elementului găsit.

Căutați după o anumită etichetă:

antet

Primul paragraf

Al doilea paragraf

Apelând document.getElementsByTagName("p") găsim toate elementele de paragraf. Acest apel returnează o matrice de elemente găsite. Prin urmare, pentru a obține elementele individuale ale matricei, este necesar să rulați prin ele într-o buclă.

Dacă trebuie să obținem doar primul element, atunci putem accesa primul element al colecției de obiecte găsite:

VarpElement = document.getElementsByTagName("p"); document.write("Textul paragrafului: " + pElement.innerText);

Obținerea unui element după clasă:

Titlul articolului

Primul paragraf

Al doilea paragraf

Selectați prin selectorul CSS:

Rezumat articol

Primul paragraf

Al doilea paragraf

Expresia document.querySelector(".annotation p") găsește un element care se potrivește cu selectorul.annotation p . Dacă pe pagină există mai multe elemente care se potrivesc cu selectorul, atunci metoda va selecta primul dintre ele. Ca rezultat, browserul va afișa:

Adnotare articol Primul paragraf Al doilea paragraf Text de selecție: Adnotare articol

Pentru a obține toate elementele dintr-un selector, puteți utiliza în mod similar metoda document.querySelectorAll, care returnează o matrice a elementelor găsite:

Rezumat articol

Primul paragraf

Al doilea paragraf

Ieșire browser:

Adnotare articol Primul paragraf Al doilea paragraf Text selector 0: Primul paragraf Textul selector 1: Al doilea paragraf