HTML DOM Element querySelectorAll() Metodu

Tanım ve Kullanım

querySelectorAll() Metot, belirtilen CSS seçicisi ile eşleşen elementlerin alt elementlerinin koleksiyonunu döndürür ve bu koleksiyon statik NodeList nesnesidir.

NodeList

NodeList, sınıf dizisi olan düğüm koleksiyonudur (listesi).

Listedeki düğüm, indeks (alt satır) ile erişilebilir. İndeks 0'dan başlar.

length özelliği, listedeki düğüm sayısını döndürebilir.

Ayrıca bkz：

Referans Kılavuzu：

classList özelliği

className özelliği

querySelector() yöntemi

getElementsByTagName() yöntemi

getElementsByClassName() yöntemi

HTML DOM Style Nesnesi

Tutum：

CSS grameri

CSS seçicileri

CSS seçici referans el kitabı

Örnek

Örnek 1

<div> elementinde class="example" olan ilk elementin arka plan rengini ayarla：

// id="myDIV" elementini (div) getir ve div içinde class="example" olan tüm elementleri getir
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// div içindeki ilk class="example" (sıra numarası 0) elementinin arka plan rengi ayarlanır
x[0].style.backgroundColor = "red";

Kendi Kendine Deneyin

İpucu：Daha fazla örnek için sayfanın altına bakın。

Gramer

element.querySelectorAll(cssSelectors)

Parametreler

Parametreler Açıklama
cssSelectors

Gerekli. Dizgi. Bir veya daha fazla CSS seçicisini elementleri eşlemek için belirtir.

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

Çoklu seçiciler için her bir seçiciyi virgülle ayırın.

İpucu：Tüm CSS seçicilerinin listesi için bizim CSS seçici referans el kitabı。

Teknik Ayrıntılar

Dönüş değeri：

NodeList nesnesi, belirtilen CSS seçicisi ile eşleşen tüm alt elementleri temsil eder.

NodeList sabit bir koleksiyondur, bu da DOM'daki değişikliklerin koleksiyona etkisi olmadığı anlamına gelir.

Dikkat:Belirtilen seçici geçersizse, SYNTAX_ERR hatası fırlatılır
DOM Sürümü： Seçiciler Düzey 1 Document Object

Daha fazla örnek

Örnek 2

<div> elementi içindeki tüm <p> elementlerini getir ve ilk <p> elementinin (sıra numarası 0) arka plan rengini ayarla：

// Elementi id="myDIV" alır (div), ardından div içindeki tüm p elementlerini alır
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// div içindeki ilk <p> elementinin (sıra numarası 0) arka plan rengi ayarlanır
x[0].style.backgroundColor = "red";

Kendi Kendine Deneyin

Örnek 3

所有 <div> 中 class="example" 的 <p> 元素的获取，并设置第一个 <p> 元素的背景：

// Elementi id="myDIV" alır (div), ardından div içinde class="example" olan tüm p elementlerini alır
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Div içinde class="example" olan ilk <p> elementinin (index 0) arka plan rengi ayarlanır
x[0].style.backgroundColor = "red";

Kendi Kendine Deneyin

Örnek 4

<div> elementinde class="example" olan element sayısını bulmak için NodeList nesnesinin length öznitelikğini kullanın:

/* Elementi id="myDIV" alır (div), ardından div içinde class="example" olan tüm p elementlerini alır, bulunan element sayısını döner */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Kendi Kendine Deneyin

Örnek 5

<div> elementi içinde class="example" olan tüm elementlerin arka plan rengi ayarlanır:

// Elementi id="myDIV" alır (div), ardından div içinde class="example" olan tüm elementleri alır
var x = document.getElementById("myDIV").querySelectorAll(".example");
// For döngüsü oluşturulur ve div içindeki tüm class="example" elementlerinin arka plan rengi ayarlanır
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Kendi Kendine Deneyin

Örnek 6

<div> elementi içinde tüm <p> elementlerinin arka plan rengi ayarlanır:

// Elementi id="myDIV" alır (div), ardından div içindeki tüm p elementlerini alır
var x = document.getElementById("myDIV").querySelectorAll("p");
// For döngüsü oluşturulur ve div içindeki tüm p elementlerinin arka plan rengi ayarlanır
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Kendi Kendine Deneyin

Örnek 7

<div> elementi içinde tüm target öznitelikli <a> elementlerinin çerçeve tarzını ayarlar:

// Elementi id="myDIV" alır (div), ardından div içinde "target" öznitelikli tüm <a> elementlerini alır
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// for döngüsü oluşturun ve div içindeki tüm target özelliği olan <a> elementlerinin çerçevesini ayarlayın
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Kendi Kendine Deneyin

Örnek 8

<div> elementindeki tüm <h2>、<div> ve <span> elementlerinin arka plan rengini ayarlayın:

// id="myDIV" olan elementi (div) alın ve div içindeki tüm <h2>、<div> ve <span> elementlerini alın
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// for döngüsü oluşturun ve <div> içindeki tüm <h2>、<div> ve <span> elementlerinin arka plan rengini ayarlayın
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Kendi Kendine Deneyin

Tarayıcı Destek

Tabloda sayıları, bu yöntemi ilk tam olarak destekleyen tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Dikkat:Internet Explorer 8 CSS2 Seçicilerini destekler. IE9 ve üst sürümler CSS3'ü de destekler.

İlgili Sayfalar

CSS Eğitimi:CSS seçicileri

CSS Referans Kılavuzu:CSS seçici referans el kitabı

JavaScript Eğitimi:JavaScript HTML DOM Node List

JavaScript Referans Kılavuzu:element.querySelector()

HTML DOM Referans Kılavuzu:document.querySelectorAll()