A DOM navigációs tulajdonságai kiválóak, ha az elemek közel vannak egymáshoz. Mi van, ha nem azok? Hogyan szerezhetünk tetszőleges elemet az oldalról?
Ehhez további keresési módszerek vannak.
document.getElementById vagy csak id
Ha egy elem rendelkezik a A id attribútummal az elemet a document.getElementById(id) módszerrel kaphatjuk meg, függetlenül attól, hogy hol van.
Például :
Ezenkívül létezik egy id nevű globális változó, amely az elemre hivatkozik:
… Ez csak akkor van, ha deklarálunk egy JavaScript változót a ugyanaz a név, akkor elsőbbséget élvez:
Ezt a viselkedést a a specifikáció, tehát egyfajta szabvány. De főleg a kompatibilitás miatt támogatott.
A böngésző a JS és a DOM névtereinek keverésével próbál segíteni bennünket. Ez megfelel az egyszerű szkripteknek, HTML-be vonva, de általában nem jó dolog. Lehet, hogy névütközések vannak. Továbbá, ha valaki elolvassa a JS kódot, és nincs HTML-je, akkor nem nyilvánvaló, hogy a változó honnan származik.
Itt az oktatóanyagban a következőt használjuk: id közvetlenül hivatkozni egy elemre a rövidség érdekében, ha nyilvánvaló, honnan származik az elem.
A való életben a document.getElementById az előnyben részesített módszer.
id egyedinek kell lennie A id egyedinek kell lennie. Csak egy elem lehet a megadott id dokumentumban.
Ha több elem van ugyanazzal a id, akkor az azt használó módszerek viselkedése kiszámíthatatlan, pl A document.getElementById véletlenszerűen bármely ilyen elemet visszaadhatja. Ezért tartsa be a szabályt, és tartsa id egyedit.
document.getElementById, nem anyElem.getElementById A getElementById metódust csak a document objektum. Megkeresi az adott id t az egész dokumentumban.
querySelectorAll
Messze a legtöbb sokoldalú módszer, elem.querySelectorAll(css) minden elemet visszaad a elem belül, amely megfelel az adott CSS választónak.
Itt keresünk minden <li> elemek, amelyek utoljára gyerekek:
Ez a módszer valóban hatékony, mert bármilyen CSS-választó használható.
A CSS-választó álosztályai, például :hover és :active is támogatott. Például a document.querySelectorAll(":hover") olyan elemekkel adja vissza a gyűjteményt, amelyeken a mutatónak most vége (fészkelési sorrendben: a legkülsőtől <html> beágyazottat).
querySelector
A elem.querySelector(css) hívás visszaadja az adott CSS első elemét választó.
Más szavakkal, az eredmény megegyezik az elem.querySelectorAll(css) eredménnyel, de utóbbi minden elemet keres és kiválaszt egyet, míg a elem.querySelector csak egyet keres. Tehát gyorsabb és rövidebb az írás.
egyezik
A korábbi módszerek a DOM-ban keresték.
Az elem.matches (css) nem keres semmit , csupán azt ellenőrzi, hogy a elem megfelel-e az adott CSS-választónak. Visszaadja true vagy false.
A módszer akkor hasznos, amikor az elemeket iteráljuk (mint például egy tömb vagy valami), és megpróbálja kiszűrni azokat, amelyek érdekelnek minket.
Például:
legközelebb
Egy elem ősei: szülő, a szülő, annak szülője és így tovább. Az ősök együtt alkotják a szülők láncolatát az elemtől a tetejéig.
A elem.closest(css) módszer a legközelebbi őst keresi, amely megfelel a CSS-választónak. Maga a elem is szerepel a keresésben.
Más szavakkal, a closest módszer felmegy a elemet és ellenőrzi a szülőket. Ha megfelel a választónak, akkor a keresés leáll, és az ős visszakerül.
Például:
getElementsBy *
Vannak más módszerek is tag, osztály stb. csomópontjaihoz.
Ma ezek többnyire történelem, mivel a querySelector erősebb és rövidebb az írása.
Tehát itt elsősorban a teljesség kedvéért foglalkozunk velük, miközben a régi szkriptekben továbbra is megtalálhatod őket.
-
elem.getElementsByTagName(tag)a megadott elemeket keresi címkét, és visszaadja a gyűjteményüket. Atagparaméter szintén csillag"*"lehet “bármely címkéhez”. -
elem.getElementsByClassName(className)olyan elemeket ad vissza, amelyek rendelkeznek az adott CSS osztállyal. -
document.getElementsByName(name)a megadottnameattribútum, egész dokumentumra kiterjedően. Nagyon ritkán használják.
Például:
Találjunk meg minden input címkét a táblázatban:
"s" levél! A kezdő fejlesztők néha elfelejtik a "s" betűt. Vagyis getElementByTagName -t próbálják hívni a getElementsByTagName helyett.
A "s" betű hiányzik a getElementById fájlból, mert egyetlen elemet ad vissza. De az getElementsByTagName elemek gyűjteményét adja vissza, így "s" van benne.
Egy másik elterjedt kezdő hiba az írás:
Ez nem fog menni, mert bemenetek gyűjteményét veszi, és az értéket hozzárendeli hozzá, nem pedig a benne lévő elemekhez.
Iterálnunk kell a gyűjtemény felett, vagy be kell szereznünk egy elemet az indexe alapján, majd hozzárendelhetjük a következőket:
.article elemeket keres:
Élő gyűjtemények
Minden módszer "getElementsBy*" élő gyűjteményt ad vissza. Az ilyen gyűjtemények mindig tükrözik a dokumentum aktuális állapotát és az “automatikus frissítést”, ha változik.
Az alábbi példában két szkript található.
- Az első hivatkozást hoz létre a
<div>gyűjteményre. Mostantól annak hossza1. - A második szkriptek akkor fut, amikor a böngésző még egy
<div>-nek megfelel, tehát hossza2.
Ezzel szemben , querySelectorAll statikus gyűjteményt ad vissza. Olyan, mint egy rögzített elemtömb.
Ha helyette használjuk, akkor mindkét szkript 1:
Most már könnyedén láthatjuk a különbséget. A statikus gyűjtemény nem nőtt, miután új div megjelent a dokumentumban.
Összegzés
A DOM-ban csomópontok keresésére 6 fő módszer létezik:
| Módszer | Keresés … | l egy elemre? | Élő? |
querySelector |
CSS-választó | ✔ | – |
querySelectorAll |
CSS-választó | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
címke vagy "*" |
✔ | ✔ |
getElementsByClassName |
osztály | ✔ | ✔ |
Messze a leggyakrabban használt querySelector és querySelectorAll, de szórványosan hasznos lehet, vagy megtalálható a régi szkriptekben.
Emellett:
- Van
elem.matches(css)annak ellenőrzése, hogy aelemmegegyezik-e az adott CSS választóval. - Van
elem.closest(css), hogy megkeresjük a legközelebbi ősat, az adott CSS-választót. Maga aelemis ellenőrizve van.
És említsünk itt még egy módszert a gyermek-szülő kapcsolat ellenőrzésére, mivel ez néha hasznos:
-
elemA.contains(elemB)igaz, haelemBelemA(elemAleszármazottja), vagy amikorelemA==elemB.