Javascript Seçiciler (Selectors)

Javascript ile Dom (Document Object Model) elementlerine erişmek için kullandığımız seçiciler(selectors) aşağıdaki gibidir.

• document.getElementById(id değeri): id niteliği ile eşleşen ilk kaydı getirir.
• document.getElementsByName(name değeri): name niteliği ile eşleşen tüm kayıtları dizi olarak getirir.
• document.getElementsByTagName(etiket adı):etiket adı ile eşleşen tüm kayıtları dizi olarak getirir.
• document.getElementsByClassName(sınıf adı):class niteliği ile eşleşen tüm kayıtları dizi olarak getirir.
• document.querySelector(seçici): seçici ile eşleşen ilk kaydı getirir.

Şimdi bu ilgili seçicileri birer örnekler beraber kullanalım.

getElementById

<p id="customp">ID ile erişlecek P etiketi</p>
<p>Paragraf Elemanı 1 </p>
<p>Paragraf Elemanı 2</p>
<script>
let customP= document.getElementById("customp")
alert(customP.innerHTML)
</script>
//p etiketini seçtikten sonra p etiketine ait ilgili özelliklere ve fonksiyonlara erişebiliriz.
//id benzersiz olmalıdır aynı id sahip etiket olmamalıdır.

getElementsByName

<p> Paragraf Elemanı 1</p>
<p name="customName">Paragraf Elemanı 2</p>
<p name="customName">Paragraf Elemanı 3</p>
<p>Paragraf Elemanı 4</p>
<script>
let customNames= document.getElementsByName("customName")
customNames.forEach((item)=>{
alert(item.innerHTML)
})
</script>
//name alanı birden fazla etikete verilebileceği için geri ilgili name özelliğine sahip elementleri array olarak vermektedir.

getElementsByTagName

<p> Paragraf Elemanı 1</p>
<p>Paragraf Elemanı 2</p>
<p>Paragraf Elemanı 3</p>
<p>Paragraf Elemanı 4</p>
<div>Bir Div Elemanı</div>
<script>
let customTags = document.getElementsByTagName("p")
for(let i=0;i<customTags.length;i++){
alert(customTags[i].innerHTML)
}
</script>
//dom üzerinde birden fazla seçmek istediğimiz etiket olabileceği için ilgili elementleri array olarak vermektedir.

getElementsByClassName

<p class="customPClass"> Paragraf Elemanı 1</p>
<p class="otherClass">Paragraf Elemanı 2</p>
<p class="customPClass">Paragraf Elemanı 3</p>
<p>Paragraf Elemanı 4</p>
<div>Div Elemanı<div/>
<script>

let customPClass = document.getElementsByClassName("customPClass")
for(let i=0;i<customPClass.length;i++){
alert(customPClass[i].innerHTML)
}
</script>
//class alanı birden fazla etikete verilebileceği için ilgili class(sınıf) özelliğine sahip elementleri array olarak vermektedir.

querySelector

<p class="customPClass"> Paragraf Elemanı 1</p>
<p class="otherClass">Paragraf Elemanı 2</p>
<p class="customPClass">Paragraf Elemanı 3</p>
<p>Paragraf Elemanı 4</p>
<div>Div Elemanı<div/>
<script>
let customQSelector = document.querySelector(".customPClass")
alert(customQSelector.innerHTML)
</script>
//class alanı birden fazla etikete verilmesine karşın bize eşleşen ilk değeri vermektedir.

Herkese İyi Çalışmalar Dilerim. :)