Proprietățile de navigare DOM sunt excelente atunci când elementele sunt apropiate unele de altele. Dacă nu sunt? Cum se obține un element arbitrar al paginii?
Există metode de căutare suplimentare pentru asta.
document.getElementById sau doar id
Dacă un element are id, putem obține elementul folosind metoda document.getElementById(id), indiferent unde este.
De exemplu :
De asemenea, există o variabilă globală numită de id care face referire la elementul:
… Asta dacă nu declarăm o variabilă JavaScript cu același nume, apoi are prioritate:
Acest comportament este descris în specificația, deci este un fel de standard. Dar este acceptat în principal pentru compatibilitate.
Browserul încearcă să ne ajute amestecând spații de nume JS și DOM. Este în regulă pentru scripturile simple, înclinate în HTML, dar în general nu este un lucru bun. Pot exista conflicte de denumire. De asemenea, atunci când cineva citește codul JS și nu are HTML în vizualizare, nu este evident de unde provine variabila.
Aici în tutorial folosim id pentru a face referire directă la un element pentru concizie, atunci când este evident de unde provine elementul.
În viața reală document.getElementById este metoda preferată.
id trebuie să fie unic id trebuie să fie unic. Nu poate exista decât un singur element în document cu id.
Dacă există mai multe elemente cu același id, atunci comportamentul metodelor care îl utilizează este imprevizibil, de ex document.getElementById poate returna oricare dintre aceste elemente la întâmplare. Așadar, vă rugăm să respectați regula și să păstrați id unic.
document.getElementById, nu anyElem.getElementById Metoda getElementById poate fi apelată numai pe document. Se caută id dat în întregul document.
querySelectorAll
De departe, cel mai metodă versatilă, elem.querySelectorAll(css) returnează toate elementele din elem care se potrivesc cu selectorul CSS dat.
Aici căutăm toate <li> elemente care sunt ultimii copii:
Această metodă este într-adevăr puternică, deoarece poate fi utilizat orice selector CSS.
Pseudo-clasele din selectorul CSS precum :hover și :active sunt, de asemenea, sprijinit. De exemplu, document.querySelectorAll(":hover") va returna colecția cu elementele pe care pointerul le-a trecut acum (în ordinea de cuibărire: de la <html> la cel mai extern imbricat).
querySelector
Apelul către elem.querySelector(css) returnează primul element pentru CSS-ul dat selector.
Cu alte cuvinte, rezultatul este același cu elem.querySelectorAll(css), dar acesta din urmă caută toate elementele și alege unul, în timp ce elem.querySelector doar caută unul. Deci, scrierea este mai rapidă și mai scurtă.
potriviri
Metodele anterioare căutau în DOM.
Elem.matches (css) nu caută nimic , doar verifică dacă elem se potrivește cu selectorul CSS dat. Returnează true sau false.
Metoda este utilă atunci când facem o iterație asupra elementelor (ca într-un matrice sau ceva) și încercând să le filtrăm pe cele care ne interesează.
De exemplu:
cel mai apropiat
Strămoșii unui element sunt: părinte părinte, părinte și așa mai departe. Strămoșii formează împreună lanțul părinților de la element la vârf.
Metoda elem.closest(css) caută cel mai apropiat strămoș care se potrivește cu selectorul CSS. elem în sine este, de asemenea, inclus în căutare.
Cu alte cuvinte, metoda closest crește de la element și verifică fiecare părinte. Dacă se potrivește cu selectorul, atunci căutarea se oprește și strămoșul este returnat.
De exemplu:
getElementsBy *
Există și alte metode de căutat pentru noduri cu etichetă, clasă etc.
Astăzi, acestea sunt în mare parte istorie, deoarece querySelector este mai puternic și mai scurt de scris.
Deci, aici le acoperim în principal pentru completitudine, în timp ce le puteți găsi în scripturile vechi.
-
elem.getElementsByTagName(tag)caută elemente cu cele date etichetați și returnează colecția acestora. Parametrultagpoate fi, de asemenea, o stea"*"pentru „orice etichete”. -
elem.getElementsByClassName(className)returnează elemente care au clasa CSS dată. -
document.getElementsByName(name)returnează elemente cu atributulnamedat, la nivel de document. Foarte rar folosit.
De exemplu:
Să găsim toate etichetele input în interiorul tabelului:
"s" scrisoare! Dezvoltatorii începători uită uneori litera "s". Adică încearcă să apeleze getElementByTagName în loc de getElementsByTagName.
"s" litera este absentă în getElementById, deoarece returnează un singur element. Dar getElementsByTagName returnează o colecție de elemente, deci există "s" în interior.
O altă greșeală larg răspândită pentru începători este să scrieți:
Asta nu va funcționa, deoarece ia o colecție de intrări și îi atribuie valoarea, mai degrabă decât elementelor din interior.
Ar trebui fie să repetați colecția, fie să obținem un element după indexul său, apoi să atribuim, astfel:
Caută elemente .article:
Colecții live
Toate metodele "getElementsBy*" returnează o colecție live. Astfel de colecții reflectă întotdeauna starea curentă a documentului și „actualizarea automată” atunci când acesta se modifică.
În exemplul de mai jos, există două scripturi.
- Primul creează o referință la colecția de
<div>. De acum, lungimea sa este1. - Al doilea script rulează după ce browserul întâlnește încă un
<div>, deci lungimea acestuia este2.
În contrast , querySelectorAll returnează o colecție statică. Este ca o matrice fixă de elemente.
Dacă o folosim în schimb, atunci ambele scripturi produc 1:
Acum putem vedea cu ușurință diferența. Colecția statică nu a crescut după apariția unui nou div în document.
Rezumat
Există 6 metode principale pentru a căuta noduri în DOM:
| Metodă | Căutări după … | Poate cal Am un element? | Live? |
querySelector |
CSS-selector | ✔ | – |
querySelectorAll |
CSS-selector | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
etichetă sau "*" |
✔ | ✔ |
getElementsByClassName |
class | ✔ | ✔ |
De departe cele mai utilizate sunt querySelector și querySelectorAll, dar getElement(s)By* poate fi sporadic de ajutor sau poate fi găsit în scripturile vechi.
Pe lângă asta:
- Există
elem.matches(css)pentru a verifica dacăelemse potrivește cu selectorul CSS dat. - Există
elem.closest(css)pentru a căuta cel mai apropiat strămoș care se potrivește selectorul CSS dat.elemeste, de asemenea, verificat.
Și să menționăm încă o metodă aici pentru a verifica relația copil-părinte, deoarece uneori este utilă:
-
elemA.contains(elemB)returnează adevărat dacăelemBse află înelemA(un descendent al luielemA) sau cândelemA==elemB.