HTML DOM querySelector() Method

Örnek

Bir de class = "example" ile ilk çocuk eleman metnini değiştirme <div> elemanı:

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

Daha "Try it Yourself" Aşağıdaki örnekler.

Tanımı ve Kullanımı

querySelector() yöntemi, belirtilen CSS eşleşen ilk alt öğesi döndürür selector(s) bir elementin.

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.

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

element .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 Eleman Nesne
Geri dönüş değeri:	Belirtilen CSS eşleşen ilk eleman 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 metnini değiştirme <p> Bir de eleman <div> elemanı:

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

Kendin dene "

Örnek

İlk metnini değiştirme <p> Bir de class = "example" ile eleman <div> elemanı:

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

Kendin dene "

Örnek

= Bir de "demo" kimliğine sahip bir öğenin metnini değiştirme <div> elemanı:

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

Kendin dene "

Örnek

İlk kırmızı bir sınır ekleyin <a> bir iç bir hedef niteliği vardır elemanı <div> elemanı:

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

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> içinde eleman <div> :

<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";

Kendin dene "

Ancak, eğer <h3> eleman önce verilmişse <h2> içinde eleman <div> . <h3> eleman kırmızı arka plan rengini alacak biridir.

<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";

Kendin dene "