HTML DOM Belgesi sorgusuSelectorAll()
Örnek
class="example" ile tüm öğeleri seçin:
document.querySelectorAll(".example");
Aşağıda daha fazla örnek.
Tanım ve Kullanım
Yöntem querySelectorAll()
, bir CSS seçici(ler)iyle eşleşen tüm öğeleri döndürür.
Yöntem bir NodeListquerySelectorAll()
döndürür .
Seçici querySelectorAll()
(ler) geçersizse yöntem bir SYNTAX_ERR istisnası atar
Öğreticiler:
JavaScript Düğüm Listesi Eğitimi
Sorgu Seçici Yöntemleri:
Öğe querySelectorAll() Yöntemi
Belge querySelectorAll() Yöntemi
GetElement Yöntemleri:
Belge getElementById() Yöntemi
HTML DOM Düğüm Listesi / HTMLKoleksiyon
HTMLCollection ve NodeList Arasındaki Farklar
Bir NodeList ve bir HTMLCollection , bir belgeden çıkarılan düğümlerin (öğelerin) dizi benzeri koleksiyonlarıdır (listeleridir). Düğümlere indeks numaraları ile erişilebilir. Endeks 0'dan başlar.
Her iki nesnenin de listedeki öğelerin sayısını döndüren bir uzunluk özelliği vardır.
HTMLCollection, canlı bir koleksiyondur : DOM'daki bir listeye bir <li> öğesi eklerseniz, HTMLCollection'daki liste de değişir.
NodeList, statik bir koleksiyondur : DOM'daki bir listeye bir <li> öğesi eklerseniz, NodeList'teki liste değişmez.
ve yöntemleri getElementsByClassName()
bir getElementsByTagName()
HTMLCollection döndürür.
ve yöntemleri querySelector()
bir querySelectorAll()
NodeList döndürür.
Sözdizimi
document.querySelectorAll(CSS selectors)
parametreler
Parameter | Description |
CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Geri dönüş değeri
Tip | Açıklama |
Nesne | CSS seçici(ler)iyle eşleşen öğeleri içeren bir NodeList . Hiçbir eşleşme bulunamazsa, null döndürülür. |
Daha fazla örnek
İlk <p> öğesine bir arka plan rengi ekleyin:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
class="example" ile ilk <p> öğesine bir arka plan rengi ekleyin:
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
class="example" içeren öğe sayısı:
let numb = document.querySelectorAll(".example").length;
class="example" ile tüm öğelerin arka plan rengini ayarlayın:
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Tüm <p> öğelerinin arka plan rengini ayarlayın:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Tüm <a> öğelerinin kenarlığını bir "target" özniteliği ile ayarlayın:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Üst öğenin bir <div> öğesi olduğu her <p> öğesinin arka plan rengini ayarlayın:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Tüm <h3>, <div> ve <span> öğelerinin arka plan rengini ayarlayın:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Tarayıcı Desteği
document.querySelectorAll()
bir DOM Düzey 3 (2004) özelliğidir.
Tüm tarayıcılarda tam olarak desteklenir:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |