Elementtien valinta querySelectorilla
Etsikää elementtejä CSS-valitsimilla.
Elementtien valinta querySelectorilla on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Tutustuminen querySelectoriin
querySelector palauttaa ensimmäisen CSS-valitsinta vastaavan elementin tai null-arvon, jos vastaavaa elementtiä ei löydy. Se on käytettävissä sekä document-objektissa että jokaisessa elementissä.
const title = document.querySelector("h1");
console.log(title.textContent);Kaikki CSS-valitsimet toimivat
querySelector-menetelmän teho perustuu siihen, että se hyväksyy samat valitsimet kuin CSS: tunnisteet, luokat, id:t, attribuutit ja niiden yhdistelmät.
document.querySelector("#main"); // by id
document.querySelector(".card"); // by class
document.querySelector("input[type=email]"); // by attributequerySelectorAll
querySelectorAll palauttaa kaikki vastaavat elementit staattisena NodeList-objektina. Vaikka osumia ei olisi lainkaan, se palauttaa tyhjän luettelon (ei koskaan null-arvoa).
const cards = document.querySelectorAll(".card");
console.log(cards.length);Tulosten läpikäyminen
querySelectorAll-menetelmän palauttama NodeList tukee suoraan forEach-menetelmää, joten läpikäyminen on selkeää.
const items = document.querySelectorAll("li");
items.forEach((li) => {
console.log(li.textContent);
});Jälkeläisvalitsimet
Sisäkkäisiin elementteihin voi kohdistaa valinnan välilyönnillä (jälkeläisvalitsin) aivan kuten CSS:ssä. Näin löydetään kaikki .price-elementit .product-elementin sisältä.
const prices = document.querySelectorAll(".product .price");Luokkien yhdistäminen
Kun luokat ketjutetaan ilman välilyöntiä, elementillä on oltava kaikki kyseiset luokat. Tässä etsitään painikkeita, jotka ovat sekä ensisijaisia että suuria.
const btn = document.querySelector("button.primary.large");Rajatut haut
Kun querySelector-menetelmää kutsutaan elementillä (ei document-objektilla), haku tehdään vain kyseisen elementin sisältä. Näin haut pysyvät paikallisina ja nopeina.
const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");Pseudoluokat
Myös rakenteelliset pseudoluokat, kuten :first-child ja :nth-of-type, toimivat.
document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");Vastaamattoman haun käsittely
Koska querySelector voi palauttaa null-arvon, tarkistakaa tulos ennen sen käyttämistä TypeError-virheen välttämiseksi.
const banner = document.querySelector(".banner");
if (banner) {
banner.classList.add("hidden");
}Attribuuttivalitsimet
Attribuuttivalitsimilla voi hakea data-attribuuttien perusteella. Tämä sopii erinomaisesti elementteihin kytkeytymiseen ilman luokkien varaan jäämistä.
const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");querySelector verrattuna vanhempiin rajapintoihin
querySelector on joustavampi kuin getElementById, koska se hyväksyy minkä tahansa valitsimen, mutta id-haut ovat silti hieman nopeampia. Käyttäkää kuhunkin tehtävään sopivaa työkalua.
document.querySelector("#nav"); // flexible
document.getElementById("nav"); // fastest for idsPikatarkistus
Testatkaa, kuinka hyvin ymmärrätte valitsimia.
Kertaus
Opitte, että querySelector palauttaa ensimmäisen osuman (tai null-arvon) ja querySelectorAll palauttaa staattisen NodeList-objektin kaikista osumista. Molemmat hyväksyvät täydet CSS-valitsimet, ja haun voi rajata ylemmän tason elementtiin. Tarkistakaa aina null-arvoa vastaan, kun käytätte querySelector-menetelmää.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 59
- Oppitunnit
- 200
Usein kysytyt kysymykset
Onko oppitunti ”Elementtien valinta querySelectorilla” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Elementtien valinta querySelectorilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Elementtien valinta querySelectorilla”?
Etsikää elementtejä CSS-valitsimilla. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Elementtien valinta querySelectorilla”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?
Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Elementtien valinta querySelectorilla
- getElementById ja getElementsByClassName
- Vanhempien, lasten ja sisarusten läpikäynti
- NodeList vai HTMLCollection