HTML DOM Document querySelector() yöntemi

Tanım ve kullanım

querySelector() Metod, CSS seçicisi ile eşleşenİlkelementi.

Dönüş vermek içinTümEşleşenler (sadece ilk eşleşen değil), querySelectorAll() kullanın.

Seçici geçersizse querySelector() ve querySelectorAll() hepsi atar SYNTAX_ERR Hata.

Örnek

Örnek 1

İlk <p> elementini alın:

document.querySelector("p");

Kişisel olarak deneyin

Örnek 2

class="example" olan ilk elementi alın:

document.querySelector(".example");

Kişisel olarak deneyin

Örnek 3

class="example" olan ilk <p> elementini alın:

document.querySelector("p.example");

Kişisel olarak deneyin

Örnek 4

id="demo" olan elementin metnini değiştirin:

document.querySelector("#demo").innerHTML = "Hello World!";

Kişisel olarak deneyin

Örnek 5

İlk <div> elementi olan <p> elementi seçin:

document.querySelector("div > p");

Kişisel olarak deneyin

Örnek 6

İlk "target" özelliğine sahip <a> elementi seçin:

document.querySelector("a[target]");

Kişisel olarak deneyin

Örnek 7

İlk <h3> veya ilk <h4> seçin:

<h3>A h3 elementi</h3>
<h4>A h4 elementi</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Kişisel olarak deneyin

Örnek 8

İlk <h3> veya ilk <h4> seçin:

<h4>A h4 elementi</h4>
<h3>A h3 elementi</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Kişisel olarak deneyin

Sözdizimi

document.querySelector(cssSelectors)

Parametre

Parametre Açıklama
cssSelectors

Gerekli. Bir veya daha fazla CSS seçicisi.

CSS seçicileri, id, sınıf, tip, özellik, özellik değeri gibi gibi HTML elementlerini seçer.

Tam liste için, sitemizi ziyaret edin CSS Seçici Referans Kılavuzu.

Çoklu seçiciler için, her bir seçiciyi virgülle ayırın (sayfa üzerindeki örnekleri görmek için bakın).

Dönüş değeri

Tip Açıklama
Nesne

CSS seçicisi ile eşleşen ilk elementin NodeList

Eşleşen bulunduğunda null döner.

HTMLCollection ve NodeList arasındaki fark

NodeList ve HTMLcollection son derece benzer.

Her ikisi de belgeden çıkarılan (element) node'ların benzer dizi koleksiyonlarıdır (listeler). Node'ları index numarası ile erişebilirsiniz. İndeks 0'dan başlar.

Her ikisi de length özelliği, listedeki (koleksiyondaki) element sayısını döndürür.

HTMLCollectiondoküman elementidirkoleksiyonu.

NodeListDoküman node'u（element, özellik ve text node）koleksiyonudur.

HTMLCollection öğeleri, isimleri, id'leri veya indexleri ile erişilebilir.

NodeList öğeleri yalnızca它们的索引号 ile erişilebilir.

HTMLCollection her zamanGerçek zamanlıkoleksiyonu.

Örneğin: <li> elementini DOM'daki bir listede eklediğinizde, HTMLCollection'teki liste değişir.

NodeList genellikleStatikkoleksiyonu.

Örneğin: <li> elementini DOM'daki bir listede eklediğinizde, NodeList'teki liste değişmez.

getElementsByClassName() ve getElementsByTagName() Tüm yöntemler, gerçek zamanlı HTMLCollection döndürür.

querySelectorAll() Yöntem, statik NodeList döndürür.

childNodes Özellik, gerçek zamanlı NodeList döndürür.

Tarayıcı desteği

document.querySelector() Bu, DOM Level 1 (1998) özelliğidir.

Bütün tarayıcılar bunu destekler:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek 9-11 Destek Destek Destek Destek

İlgili sayfalar

Eğitim:

CSS Seçici

CSS Seçici Referans Kılavuzu

HTML DOM NodeList Referans Kılavuzu

QuerySelector Yöntemi:

querySelector() Yöntemi

querySelectorAll() Yöntemi

GetElement Yöntemi:

getElementById() yöntemi

getElementsByTagName() yöntemi

getElementsByClassName() yöntemi