Haku: getElement *, querySelector *

DOM-navigointiominaisuudet ovat erinomaisia, kun elementit ovat lähellä toisiaan. Entä jos he eivät ole? Kuinka saada mielivaltainen sivun elementti?

Sille on muita hakumenetelmiä.

document.getElementById tai vain id

Jos elementillä on id -määritteen avulla voimme saada elementin käyttämällä menetelmää document.getElementById(id) riippumatta siitä, missä se on.

Esimerkiksi :

Lisäksi on olemassa globaali muuttuja, jonka nimi on id ja joka viittaa elementtiin:

… Ellemme julista JavaScript-muuttujaa sama nimi, niin se on etusijalla:

querySelectorAll

Ylivoimaisesti eniten monipuolinen menetelmä, elem.querySelectorAll(css) palauttaa kaikki elem -elementit, jotka vastaavat annettua CSS-valitsinta.

Täältä etsimme kaikkia <li> elementit, jotka ovat viimeisiä lapsia:

Tämä menetelmä on todellakin tehokas, koska mitä tahansa CSS-valitsinta voidaan käyttää.

querySelector

Kutsu elem.querySelector(css) palauttaa annetun elementin ensimmäisen elementin valitsin.

Toisin sanoen tulos on sama kuin elem.querySelectorAll(css), mutta jälkimmäinen etsii kaikkia elementtejä ja valitsee yhden, kun taas elem.querySelector etsii vain yhtä. Joten kirjoittaminen on nopeampaa ja myös lyhyempää.

vastaa

Aikaisemmat menetelmät etsivät DOM: ia.

Elem.matches (css) ei etsi mitään , se vain tarkistaa, vastaako elem annettuja CSS-valitsimia. Se palauttaa true tai false.

Menetelmä on kätevä, kun toistamme elementtejä (kuten taulukko tai jotain) ja yrittää suodattaa meidät kiinnostavat.

Esimerkiksi:

lähin

Elementin esi-isät ovat: vanhempi, vanhempi, sen vanhempi ja niin edelleen. Esivanhemmat muodostavat yhdessä vanhempien ketjun elementistä ylöspäin.

Menetelmä elem.closest(css) etsii lähintä CSS-valitsinta vastaavaa esi-isää. Itse elem sisältyy myös hakuun.

Toisin sanoen menetelmä closest nousee ja tarkistaa jokaisen vanhemman. Jos se vastaa valitsinta, haku pysähtyy ja esi-isä palautetaan.

Esimerkiksi:

getElementsBy *

On myös muita etsittäviä tapoja tunnisteen, luokan jne. solmuille.

Nykyään ne ovat enimmäkseen historiaa, koska querySelector on tehokkaampi ja lyhyempi kirjoittaa.

Joten tässä käsitellään niitä lähinnä täydellisyyden vuoksi, mutta voit silti löytää ne vanhoista skripteistä.

• elem.getElementsByTagName(tag) etsii elementtejä annetulla ja palauttaa niiden kokoelman. Parametri tag voi olla myös tähti "*" kaikille ”tageille”.
• elem.getElementsByClassName(className) palauttaa elementit, joilla on annettu CSS-luokka.
• document.getElementsByName(name) palauttaa elementit annettu name -attribuutti, koko asiakirja. Hyvin harvoin käytetty.

Esimerkiksi:

Etsitään kaikki input -tagit taulukon sisältä:

Etsitään elementtejä .article:

Live-kokoelmat

Kaikki menetelmät "getElementsBy*" palauttavat elävän kokoelman. Tällaiset kokoelmat heijastavat aina asiakirjan nykyistä tilaa ja ”automaattinen päivitys”, kun se muuttuu.

Alla olevassa esimerkissä on kaksi komentosarjaa.

1. Ensimmäinen luo viitteen <div> -kokoelmaan. Sen pituus on toistaiseksi 1.
2. Toinen komentosarja suoritetaan, kun selain tapaa vielä yhden <div>, joten sen pituus on 2.

Sen sijaan , querySelectorAll palauttaa staattisen kokoelman. Se on kuin kiinteä joukko elementtejä.

Jos käytämme sitä sen sijaan, molemmat komentosarjat tuottavat 1:

Nyt voimme helposti nähdä eron. Staattinen kokoelma ei lisääntynyt, kun uusi div esiintyi asiakirjassa.

Yhteenveto

DOM-solmujen etsimiselle on 6 päämenetelmää:

Ylivoimaisesti eniten käytetyt ovat querySelector ja querySelectorAll, mutta getElement(s)By* voi olla satunnaisesti hyödyllistä tai löytyy vanhoista skripteistä.

Sen lisäksi:

• elem.matches(css) tarkistaaksesi, vastaa annettuja CSS-valitsimia.
• elem.closest(css) on etsimässä lähintä vastaavaa esi-isää annettu CSS-valitsin. Myös itse elem tarkistetaan.

Mainitaan tässä vielä yksi tapa tarkistaa lapsen ja vanhemman suhde, koska se on joskus hyödyllistä:

• elemA.contains(elemB) palauttaa arvon true, jos elemB on elemA (elemA jälkeläinen) tai kun elemA==elemB.