HTML DOM Belgesi sorgusuSelector()
Örnekler
İlk <p> öğesini alın:
document.querySelector("p");
class="example" ile ilk öğeyi alın:
document.querySelector(".example");
Aşağıda daha fazla örnek.
Tanım ve Kullanım
Yöntem , bir CSS seçiciyle eşleşen ilkquerySelector() öğeyi döndürür .
Tüm eşleşmeleri döndürmek için (yalnızca ilkini değil), querySelectorAll()bunun yerine kullanın.
Her ikisi de querySelector()ve querySelectorAll()bir NodeList döndürün .
Her ikisi de querySelector()ve querySelectorAll()seçici(ler) geçersizse bir SYNTAX_ERR istisnası atın.
Öğreticiler:
JavaScript Düğüm Listesi Eğitimi
Sorgu Seçici Yöntemleri:
Öğe querySelectorAll() Yöntemi
Belge querySelectorAll() Yöntemi
GetElement Yöntemleri:
Belge getElementById() Yöntemi
HTML DOM Düğüm Listesi / HTMLKoleksiyon
HTMLCollection ve NodeList Arasındaki Farklar
Bir NodeList ve bir HTMLCollection , bir belgeden çıkarılan düğümlerin (öğelerin) dizi benzeri koleksiyonlarıdır (listeleridir). Düğümlere indeks numaraları ile erişilebilir. Endeks 0'dan başlar.
Her iki nesnenin de listedeki öğelerin sayısını döndüren bir uzunluk özelliği vardır.
HTMLCollection, canlı bir koleksiyondur : DOM'daki bir listeye bir <li> öğesi eklerseniz, HTMLCollection'daki liste de değişir.
NodeList, statik bir koleksiyondur : DOM'daki bir listeye bir <li> öğesi eklerseniz, NodeList'teki liste değişmez.
ve yöntemleri getElementsByClassName()bir getElementsByTagName()
HTMLCollection döndürür.
ve yöntemleri querySelector()bir querySelectorAll()
NodeList döndürür.
Sözdizimi
document.querySelector(CSS selectors)
parametreler
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Geri dönüş değeri
| Tip | Açıklama |
| Nesne | CSS seçici(ler)iyle eşleşen ilk öğeye sahip bir NodeList . Hiçbir eşleşme bulunamazsa, nulldöndürülür. |
Daha fazla örnek
class="example" ile ilk <p> öğesini alın:
document.querySelector("p.example");
Öğenin metnini id="demo" ile değiştirin:
document.querySelector("#demo").innerHTML = "Hello World!";
Üst öğenin bir <div> öğesi olduğu ilk <p> öğesini seçin.
document.querySelector("div > p");
"Hedef" özniteliğine sahip ilk <a> öğesini seçin:
document.querySelector("a[target]");
İlk <h3> veya ilk <h4> öğesini seçin:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
İlk <h3> veya ilk <h4> öğesini seçin:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Tarayıcı Desteği
document.querySelector() bir DOM Düzey 1 (1998) özelliğidir.
Tüm tarayıcılarda tam olarak desteklenir:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |