CSS Seçiciler İle HTML Dom Öğeleri Bulma (Css Selectors)

Kasım 22, 2018
javascript ve kütüphane
  1. Ana Sayfa
  2. >
  3. Javascript
  4. >
  5. CSS Seçiciler İle HTML Dom...


Eğer javascript kullanarak belirli bir CSS seçici ile eşleşen tüm HTML dom öğelerini (id, sınıf isimleri, tipleri, özellikleri, özniteliklerin değerleri, vs) bulmak içn querySelectorAll () yöntemini kullanmak istiyorsanız. olay aşağıdaki gibi gerçekleşicektir.

<!DOCTYPE html>
<html>
<body>

<h2>Bugün Css Seçicilerle Html Dom Elementlerini Array Mantığında Buluyoruz.</h2>

<p class=”benisec” style=”color:grey;”>Benim Dize Numaram [0]</p>
<p class=”benisec” style=”color:grey;”>Benim Dize Numaram [1]</p>
<p class=”benisec” style=”color:grey;”>Benim Dize Numaram [2]</p>
<p class=”benisec” style=”color:grey;”>Benim Dize Numaram [3]</p>

<p id=”bulunandeger” style=”color:green; font-weight:bold; font-size:1.4em;”></p>

<script>
var dizenumarasi= document.querySelectorAll(“p.benisec”);
document.getElementById(“bulunandeger”).innerHTML =
‘Seçtiğiniz Dize Numarasına Göre: ‘ + dizenumarasi[0].innerHTML;
</script>

</body>
</html>

Demo: https://www.w3schools.com/code/tryit.asp?filename=FXHKRKI0A9DS

Kategoriler:Javascript