HTML DOM Element querySelector() Metodu

Tanım ve Kullanım

querySelector() Yöntem, elementin belirtilen CSS seçicisi ile eşleşen ilk alt elementini döner.

Dikkat:

querySelector() Yöntem sadece belirtilen seçici ile eşleşen ilk elementi döner. Tüm eşleşen elementleri dönmek için querySelectorAll() yöntemi.

Ayrıca bkz.:

Referans Kılavuzu:

classList özelliği

className özelliği

querySelectorAll() yöntemi

getElementsByTagName() yöntemi

getElementsByClassName() yöntemi

HTML DOM Style Nesnesi

Tutoriyal:

CSS grameri

CSS seçici

CSS seçici referans el kitabı

Örnek

Örnek 1

Değiştir <div> elementi içinde class="example" olan ilk alt elementinin metnini:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

Kişisel olarak deneyin

Sayfa altında daha fazla örnek sağlanmıştır.

Gramer

element.querySelector(CSSselectors)

Parametreler

Parametreler Açıklama
CSSselectors

Gerekli. String. Bir veya daha fazla CSS seçicisini elementi eşlemek için belirtin.

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

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

Dönen element, belgede önce bulunan elemente bağlıdır (aşağıdaki "Daha fazla örnek"'i bkz.).

İpucu:Tam CSS seçici listesi için bizim CSS seçici referans el kitabı.

Teknik Ayrıntılar

Dönüş değeri:

Belirtilen CSS seçicisini karşılayan ilk elementi döner.

Eşleşen bir bulgu bulunmadığında null döner.

Belirtilen seçici geçersizse, SYNTAX_ERR istisnası fırlatılır.
DOM Sürümü: Seçiciler Seviyesi 1 Element Object

Daha fazla örnek

Örnek 2

Değiştir <div> elementi içindeki ilk <p> elementinin metnini:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Kişisel olarak deneyin

Örnek 3

Değiştir <div> elementi içinde class="example" olan ilk <p> elementinin metnini:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Kişisel olarak deneyin

Örnek 4

Değiştir <div> elementi içinde id="demo" olan elementin metnini:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Kişisel olarak deneyin

Örnek 5

<div> içindeki target özelliğini ayarlayan ilk <a> elementine kırmızı çizgi ekleyin:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

Kişisel olarak deneyin

Örnek 6

Bu örnek, birden fazla seçicinin nasıl çalıştığını gösterir.

İki elementiniz var: <h2> ve <h3> elementleri.

Aşağıdaki kod, <div> içindeki ilk <h2> elementine arka plan rengi ekler:

<div id="myDIV">
  <h2>A h2 elementi</h2>
  <h3>A h3 elementi</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Kişisel olarak deneyin

Örnek 7

Ancak, <div> içindeki <h3> elementi <h2> elementinden önce konumlandırıldığında, <h3> elementi kırmızı arka plan rengi alır.

<div id="myDIV">
  <h3>A h3 elementi</h3>
  <h2>A h2 elementi</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Kişisel olarak deneyin

Tarayıcı desteği

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

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

İlgili sayfalar

CSS Eğitimi:CSS seçici

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

JavaScript Eğitimi:JavaScript HTML DOM Node List

JavaScript Referans Kılavuzu:document.querySelector()

JavaScript Referans Kılavuzu:element.querySelectorAll()

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