HTML DOM querySelector() Yöntemi

Örnek

Bir <div> öğesinde ilk alt öğenin metnini class="example" ile değiştirin:

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

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

Tanım ve Kullanım

querySelector() yöntemi, bir öğenin belirtilen CSS seçicileriyle eşleşen ilk alt öğeyi döndürür .

Not: querySelector() yöntemi yalnızca belirtilen seçicilerle eşleşen ilk öğeyi döndürür. Tüm eşleşmeleri döndürmek için bunun yerine querySelectorAll() yöntemini kullanın.

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
querySelector()	4.0	8.0	3.5	3.2	10.0

Sözdizimi

element.querySelector(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. The returned element depends on which element that is first found in the document (See "More Examples"). 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 Öğe Nesnesi
Geri dönüş değeri:	Belirtilen CSS seçicileriyle eşleşen ilk öğe. Hiçbir eşleşme bulunamazsa, null döndürülür. Belirtilen seçici(ler) geçersizse bir SYNTAX_ERR istisnası atar.

Daha fazla örnek

Örnek

Bir <div> öğesindeki ilk <p> öğesinin metnini değiştirin:

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

Örnek

Bir <div> öğesinde ilk <p> öğesinin metnini class="example" ile değiştirin:

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

Örnek

Bir <div> öğesinde id="demo" olan bir öğenin metnini değiştirin:

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

Örnek

Bir <div> öğesinin içinde hedef özniteliği olan ilk <a> öğesine kırmızı bir kenarlık ekleyin:

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

Örnek

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

İki öğeniz olduğunu varsayalım: bir <h2> ve bir <h3> öğesi.

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

<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Ancak, <h3> öğesi <div> öğesindeki <h2> öğesinden önce yerleştirilmişse. <h3> öğesi, kırmızı arka plan rengini alacak öğedir.

<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";