En son web geliştirme öğreticiler
 

HTML DOM querySelectorAll() Method

<Belge Nesne

Örnek

class = "example" ile belgedeki tüm öğeleri alın:

var x = document.querySelectorAll(".example");
Kendin dene "

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

Tanımı ve Kullanımı

querySelectorAll() yöntemi, belirtilen CSS ile eşleşen belgedeki tüm öğeleri 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 , belirtilen seçici ile eşleşir elemanlarının sayısını belirlemek için NodeList nesnenin özelliği o zaman tüm unsurları ile döngü ve istediğiniz bilgi ayıklamak.

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

document.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: Belirtilen CSS ile eşleşen belgedeki tüm elemanları temsil eden bir NodeList amacı, selector(s) . NodeList DOM değişiklikler koleksiyonunda YOK etkisi vardır, yani statik bir koleksiyon. Eğer bir SYNTAX_ERR istisna atar selector(s) geçersiz
Örnekler

Diğer Örnekler

Örnek

Tüm Get <p> belgedeki öğeleri ve ilk arka plan rengini ayarlamak <p> elemanı (index 0) :

// Get all <p> elements in the document
var x = document.querySelectorAll("p");

// Set the background color of the first <p> element
x[0].style.backgroundColor = "red"; 
Kendin dene "

Örnek

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

// Get all <p> elements in the document with class="example"
var x = document.querySelectorAll("p.example");

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

Örnek

class = "example" ile kaç unsurları öğrenin (NodeList nesnenin uzunluk özelliğini kullanarak) belgesinde vardır:

var x = document.querySelectorAll(".example").length;
Kendin dene "

Örnek

class = "example" ile belgedeki tüm unsurların arka plan rengini ayarlayın:

var x = document.querySelectorAll(".example");
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> belgede elemanları:

var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Kendin dene "

Örnek

Tüm sınırını ayarla <a> bir var belgedeki elemanların "target" özelliğini:

var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.border = "10px solid red";
}
Kendin dene "

Örnek

Her arka plan rengini ayarlayın <p> ebeveyn nerede elemanı <div> öğesi:

var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Kendin dene "

Örnek

Tüm arka plan rengini ayarlayın <h2>, <div> ve <span> belgedeki elemanlar:

var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Kendin dene "

İlgili Sayfalar

CSS Eğitimi: CSS Seçiciler

CSS Referans: CSS Seçiciler Referans

JavaScript Öğretici: JavaScript HTML DOM Düğüm Listesi

HTML DOM Referans: belge. querySelector()

HTML DOM Referans: öğesi. querySelectorAll()

<Belge Nesne