HTML DOM Document querySelectorAll() Metodu

Tanım ve Kullanım

querySelectorAll() Metod CSS seçici ile eşleşen tüm elemanları döndürür.

querySelectorAll() Metod NodeList döndürür.

Eğer seçici geçersizse querySelectorAll() Metod hata fırlatabilir SYNTAX_ERR Hata.

Örnek

Örnek 1

class="example" olan tüm elemanları seç：

document.querySelectorAll(".example");

Kişisel olarak deneyin

Örnek 2

İlk <p> elemanına arka plan rengi ekle：

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Kişisel olarak deneyin

Örnek 3

İlk class="example" olan <p> elemanına arka plan rengi ekle：

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Kişisel olarak deneyin

Örnek 4

class="example" olan elemanların sayısı：

let numb = document.querySelectorAll(".example").length;

Kişisel olarak deneyin

Örnek 5

class="example" olan tüm elemanların arka plan rengini ayarla：

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Kişisel olarak deneyin

Örnek 6

Tüm <p> elementlerinin arka plan rengini ayarlayın:

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Kişisel olarak deneyin

Örnek 7

Tüm "target" özelliğini kullanan <a> elementlerinin çerçevesini ayarlayın:

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

Kişisel olarak deneyin

Örnek 8

Anavatanda <div> elementi olan her <p> elementinin arka plan rengini ayarlayın:

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Kişisel olarak deneyin

Örnek 9

Tüm <h3>, <div> ve <span> elementlerinin 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";
}

Kişisel olarak deneyin

grama

document.querySelectorAll(CSSselectors)

parametre

parametre tanım
CSSselectors

Gerekli. Bir veya daha fazla CSS seçicisi.

CSS seçicileri id, sınıf, tür, özellik, özellik değeri gibi seçeneklere göre HTML elementlerini seçer.

Tam liste için bizim CSS Seçici Referans Kılavuzu.

Çoklu seçiciler için her bir seçiciyi virgülle ayırın (yukarıdaki örnekleri göz önünde bulundurun).

dönüş değeri

tür tanım
nesne

CSS seçicisi ile eşleşen elementlerin NodeList nesnesi.

Eşleşen bir bulgu bulunamazsa, boş bir NodeList nesnesi döndürülür.

HTMLCollection ve NodeList arasındaki fark

NodeList ve HTMLcollection çok benzer.

her ikisi de belgeden çıkarılan düğüm (element) benzeri dizilik koleksiyonlar (listeler). Düğümü (elementi) indeks numarası (dizgi) ile erişebilirsiniz. İndeks 0'dan başlar.

her ikisi de length özellik, listeye (koleksiyona) ait element sayısını döndürür.

HTMLCollectionDoküman ElementidirTopluluğu.

NodeListDoküman Düğümü（element node, özellik node ve text node）topluluğu.

HTMLCollection öğeleri, adları, id'leri veya index numaraları ile erişilebilir.

NodeList öğeleri yalnızca它们的索引 numarası ile erişilebilir.

HTMLCollection her zamanCanlıTopluluğu.

Örneğin: <li> elementi DOM listesine eklenirse, HTMLCollection listesi değişir.

NodeList genellikleStatikTopluluğu.

Örneğin: <li> elementi DOM listesine eklenirse, NodeList listesi değişmez.

getElementsByClassName() ve getElementsByTagName() Metodlar, canlı HTMLCollection döndürür.

querySelectorAll() Metod, statik NodeList döndürür.

childNodes Özellik, canlı NodeList döndürür.

Tarayıcı Destek

document.querySelectorAll() DOM Level 3 (2004) Özelliğidir.

Tüm tarayıcılar destekler:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek 9-11 Destek Destek Destek Destek

İlgili Sayfalar

Eğitim:

CSS Seçici

CSS Seçici Referans Kılavuzu

JavaScript Node List Eğitimi

querySelector Metodu：

Element querySelector() Metodu

Element querySelectorAll() Metodu

Document querySelector() Metodu

Document querySelectorAll() Metodu

GetElement Metodu：

Document getElementById() Metodu

Document getElementsByTagName() Metodu

Document getElementsByClassName() Metodu