HTML DOM querySelectorAll() Yöntemi

Örnek

Bir <div> öğesinin içinde class="example" ile ilk öğenin arka plan rengini ayarlayın:

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.

Tanım ve Kullanım

QuerySelectorAll() yöntemi, statik bir NodeList nesnesi olarak, bir öğenin belirtilen CSS seçici(ler)iyle eşleşen alt öğelerinin bir koleksiyonunu döndürür.

NodeList nesnesi, bir düğüm koleksiyonunu temsil eder. Düğümlere indeks numaraları ile erişilebilir. Endeks 0'dan başlar.

İpucu: Belirtilen seçiciyle eşleşen alt düğümlerin sayısını belirlemek için NodeList nesnesinin length özelliğini kullanabilir , ardından tüm düğümler arasında döngü yapabilir ve istediğiniz bilgiyi çıkarabilirsiniz.

CSS Seçiciler hakkında daha fazla bilgi için CSS Seçici Eğitimimizi ve CSS Seçici Referansımızı ziyaret edin .

Tarayıcı Desteği

Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Not: Internet Explorer 8, CSS2 seçicilerini destekler. IE9 ve sonraki sürümlerin CSS3 desteği de vardır.

Sözdizimi

element.querySelectorAll(CSS selectors)

Parametre Değerleri

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Teknik detaylar

DOM Sürümü:	Seçiciler Düzey 1 Belge Nesnesi
Geri dönüş değeri:	Geçerli öğenin belirtilen CSS seçicileriyle eşleşen tüm alt öğelerini temsil eden bir NodeList nesnesi. NodeList, statik bir koleksiyondur, yani DOM'deki değişikliklerin koleksiyonda HİÇBİR etkisi yoktur. Not: Belirtilen seçici(ler) geçersizse bir SYNTAX_ERR istisnası atar

Daha fazla örnek

Örnek

Tüm <p> öğelerini bir <div> öğesinin içine alın ve ilk <p> öğesinin arka plan rengini ayarlayın (indeks 0):

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";

Örnek

Bir <div> içindeki tüm <p> öğelerini class="example" ile alın ve ilk <p> öğesinin arka planını ayarlayın:

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Örnek

Bir <div> öğesinde class="example" olan kaç öğe olduğunu öğrenin (NodeList nesnesinin length özelliğini kullanarak):

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Örnek

Bir <div> öğesinde class="example" olan tüm öğelerin arka plan rengini ayarlayın:

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Örnek

Bir <div> öğesindeki tüm <p> öğelerinin arka plan rengini ayarlayın:

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Örnek

Bir "target" özniteliğine sahip bir <div> öğesindeki tüm <a> öğelerinin kenarlık stilini ayarlayın:

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}

Örnek

Bir <div> öğesindeki tüm <h2>, <div> ve <span> öğelerinin arka plan rengini ayarlayın:

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}