Elementlər toplusu

Bir neçə elementi seç

querySelectorAll statik NodeList verir: sonradan əlavə olunan uyğun elementlər həmin köhnə siyahıya avtomatik qoşulmur. children isə yalnız element övladlarının canlı HTMLCollection toplusudur. Hər ikisi tam Array deyil; lazım olduqda Array.from istifadə et.

const cards = document.querySelectorAll('.product');
cards.forEach(card => card.classList.add('ready'));
const first = cards[0];
if (first) {
  console.log(first.parentElement, first.nextElementSibling);
  first.setAttribute('data-selected', 'true');
  first.classList.toggle('selected', true);
}
const links = Array.from(document.querySelectorAll('a'));
console.log(links.map(link => link.href));

Nümunə

Ağacda hərəkət və atributlar

parentElement valideyni, children övladları, firstElementChild və lastElementChild ilk və son element övladını göstərir. nextElementSibling və previousElementSibling qonşulara keçir; olmadığı halda null ola bilər. childNodes mətn düyünlərini də daxil edir.

classList sinif əlavə/silmə üçün rahatdır. style inline üslubu dəyişir; təkrar vizual vəziyyətlərdə sinif dəyişmək daha oxunaqlıdır. getAttribute ilkin atribut mətnini, bəzi DOM xassələri isə emal edilmiş dəyəri göstərə bilər; məsələn linkin href xassəsi tam URL ola bilər.

Əlavə qeydlər və mənbələr

querySelectorAll statik NodeList qaytarır; onu indeks və forEach ilə gəzə bilərsən. parentElement, children və qonşu element xassələri ilə DOM ağacında hərəkət et, atribut və sinifləri dəyiş.

Niyə vacibdir?

DOM HTML sənədinin proqramlaşdırma vasitəsilə işləyə bildiyin təqdimatıdır.

Əvvəlki biliklər

JavaScript əsasları

Bu mövzuda

NodeList və HTMLCollection
Valideyn, övlad və qonşu elementlər
Atributlar, style və classList

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Elementlər toplusunu seç

Bir neçə elementə uyğun selektoru seç və tapılan sayı gör.

Element

Selektor

Hədəf: Bütün abzasları seç.

Birbaşa övlad

İçəridəki övlad

Qeyd

Seçilən element: 0

.note { outline: 2px solid; }

Özün sına

Bütün məhsul kartlarını seç, qiyməti aşağı olanlara sinif əlavə et. İlk kartın valideynini və növbəti qonşusunu tap; olmayan element üçün yoxlama yaz.

Nəticəni necə yoxlayım?

Bütün kartlar seçilib yenilənir; valideyn və qonşu elementlər null halı nəzərə alınaraq oxunur.

Gözlənilən nəticə

5 AZN-lik Qələm kartı seçilir, 20 AZN-lik Kitab seçilmir.
Konsolda MAIN və Kitab görünür; boş siyahı xətaya düşmür.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Bütün kartlar querySelectorAll ilə seçilir; qonşu və valideyn olmaya bildiyi üçün optional chaining istifadə edilir.

index.html

<main><article class="product" data-price="5">Qələm</article><article class="product" data-price="20">Kitab</article></main>
<style>.cheap{background:#e9f881;padding:12px}</style>
<script src="main.js"></script>

main.js

const cards = document.querySelectorAll('.product');
cards.forEach(card => { if (Number(card.dataset.price) < 10) card.classList.add('cheap'); });
const first = cards[0];
console.log(first?.parentElement?.tagName ?? 'Valideyn yoxdur');
console.log(first?.nextElementSibling?.textContent ?? 'Qonşu yoxdur');

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.