HTML DOM querySelectorAll() Method

Örnek

Class = "example" ile ilk elemanın arka plan rengini ayarlayın bir iç <div> elemanı:

// 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";

Kendin dene "

Daha "Try it Yourself" Aşağıdaki örnekler.

Tanımı ve Kullanımı

querySelectorAll() yöntemi, belirtilen CSS eşleşen bir öğenin alt öğeleri koleksiyonunu döndürür selector(s) statik NodeList nesnesi olarak.

NodeList nesne düğüm topluluğunu temsil eder. düğümleri endeks numaralarıyla ulaşılabilir. indeks 0 ile başlar.

İpucu: kullanabilir uzunluğu o zaman bütün düğümler döngü ve istediğiniz bilgi çıkarabilir, belirtilen seçici ile eşleşir alt düğüm sayısını belirlemek için NodeList Nesnenin özelliği.

CSS Selectors hakkında daha fazla bilgi için lütfen ziyaret CSS Seçiciler Eğitimi ve CSS Seçiciler Referans .

Tarayıcı Desteği

Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtir.

Yöntem
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Not: Internet Explorer 8 BB2 seçicileri için desteği vardır. IE9 ve sonraki sürümlerinde CSS3 desteği de var.

Sözdizimi

element .querySelectorAll( CSS selectors )

Parametre Değerleri

Parametre	tip	Açıklama
CSS selectors	String	Gereklidir. eleman maç için bir veya daha fazla CSS seçicileri belirtir. Bunlar vb özelliklerin kendi kimliği, sınıflar, türleri, nitelikleri, değerlere dayalı HTML öğeleri seçmek için kullanılır Birden seçiciler, bir virgül ile her seçme ayırın. İpucu: tüm CSS Selectors listesi için, bizim bakmak CSS Seçiciler Referans .

Teknik detaylar

DOM Versiyon:	Seçiciler Seviye 1 Belge Nesne
Geri dönüş değeri:	Belirli bir CSS ile eşleşen akımı elemanının tüm alt öğeleri temsil eden bir NodeList amacı, selector(s) . NodeList DOM değişiklikler koleksiyonunda YOK etkisi vardır, yani statik bir koleksiyon. Not: Belirtilen eğer SYNTAX_ERR istisna atar selector(s) geçersiz

Diğer Örnekler

Örnek

Tüm Get <p> Bir iç elemanları <div> elemanı ve ilk arka plan rengini ayarlamak <p> elemanı (index 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";

Kendin dene "

Örnek

Tüm Get <p> Bir öğeleri <div> class = "example" ile ve ilk arka planını ayarlamak <p> elemanı:

// 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";

Kendin dene "

Örnek

Class = "example" ile kaç unsurları öğrenin bir yer vardır <div> (NodeList nesnesinin length özelliğini kullanarak) elemanı:

/* 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;

Kendin dene "

Örnek

Bir de class = "Örneğin" olan tüm unsurların arka plan rengini ayarlayın <div> elemanı:

// 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";
}

Kendin dene "

Örnek

Tüm arka plan rengini ayarlayın <p> Bir elemanların <div> elemanı:

// 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";
}

Kendin dene "

Örnek

Hepsinden ötesi stilini ayarlayın <a> bir elemanların <div> Bir var elemanı "target" özelliğini:

// 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";
}

Kendin dene "

Örnek

Arka plan rengini ayarlayın bütün <h2>, <div> ve <span> bir öğeler <div> elemanı:

// 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";
}

Kendin dene "