Örnek
class = "example" ile belgedeki ilk eleman alın:
document.querySelector(".example"); Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
querySelector() yöntemi, belirtilen CSS ile eşleşen birinci elemanı döner selector(s) belgesinde.
Not: querySelector() metodu sadece belirtilen seçiciler uyan ilk elemanı ile döner. Tüm maçları dönmek kullanmak için querySelectorAll() yerine yöntemi.
Seçici birkaç kez kullanılan belgedeki bir kimlik eşleşirse (bir unutmayın "id" o ilk eşleşen elemanını döndürür bir sayfa içinde benzersiz olmalıdır ve bir defadan fazla kullanılan olmamalıdır).
CSS Selectors hakkında daha fazla bilgi için lütfen ziyaret CSS Seçiciler Eğitimi ve CSS Seçiciler Referans .
Tarayıcı Desteği
Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtir.
| Yöntem | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8 | 3.5 | 3.2 | 10.0 |
Sözdizimi
document.querySelector( CSS selectors )Parametre Değerleri
| Parametre | tip | Açıklama |
|---|---|---|
| CSS selectors | String | Gereklidir. eleman maç için bir veya daha fazla CSS seçicileri belirtir. Bunlar vb özelliklerin kendi kimliği, sınıflar, türleri, nitelikleri, değerlere dayalı HTML öğeleri seçmek için kullanılır Birden seçiciler, bir virgül ile her seçme ayırın. Döndürülen eleman ilk belgede bulunduğunu hangi eleman bağlıdır (See "More Examples") . İpucu: tüm CSS Selectors listesi için, bizim bakmak CSS Seçiciler Referans . |
Teknik detaylar
| DOM Versiyon: | Seçiciler Seviye 1 Belge Nesne |
|---|---|
| Geri dönüş değeri: | Belirtilen CSS ile eşleşen birinci eleman temsil eden bir NodeList amacı, selector(s) . Herhangi bir eşleşme bulunursa, boş döndürülür. Belirtilen eğer SYNTAX_ERR istisna atar selector(s) geçersiz. |
Diğer Örnekler
Örnek
İlk alın <p> class = "example" ile belgedeki eleman:
document.querySelector("p.example"); Kendin dene " Örnek
"Demo" = kimliğine sahip bir öğenin metnini değiştirin:
document.querySelector("#demo").innerHTML = "Hello World!";
Kendin dene " Örnek
İlk alın <p> ebeveyn olan belgede elemanı <div> öğesi.
document.querySelector("div > p"); Kendin dene " Örnek
İlk alın <a> bir sahiptir belgede elemanı "target" özelliğini:
document.querySelector("a[target]"); Kendin dene " Örnek
Bu örnek seçiciler nasıl çalıştığını birden ortaya koymaktadır.
Bir: iki öğe olduğunu varsayalım <h2> ve <h3> elemanı.
Aşağıdaki kod birinciye bir arka plan rengi katacak <h2> belgedeki elemanı:
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2,
h3").style.backgroundColor = "red"; Kendin dene " Ancak, eğer <h3> eleman önce verilmişse <h2> belgedeki elemanı. <h3> eleman kırmızı arka plan rengini alacak biridir.
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2,
h3").style.backgroundColor = "red"; Kendin dene " İlgili Sayfalar
CSS Eğitimi: CSS Seçiciler
CSS Referans: CSS Seçiciler Referans
JavaScript Öğretici: JavaScript HTML DOM Düğüm Listesi
JavaScript Referans: öğesi. querySelector()
HTML DOM Referans: belge. querySelectorAll()
JavaScript Referans: öğesi. querySelectorAll()