Java Script (js) Seçiciler
by admin,Javascript ile html unsurlarına ualaşabiliriz.Bu konuda 4 temel konudan bahsetmek istiyorum.
Bunlardan birincisi unsurları etiket adına göre seçmek,diğeri string olan name özelliğine göre seçmek ,bir diğeri id ye göre seçmek ve düğüm yapısına göre seçmek.
1-getElementsByTagName -getElementById
Hemen bir örnekle olaya açıklık getirelim.
<script type=”text/language”>
function kalinyap(){
var divv=document.getElementById(’mydiv’);
var paragraf=document.getElementsByTagName(’p');
for(i=0;i<paragra.length;i++){
paragraf[i].style.fontStyle=”;
paragraf[i].style.fontWeight=”;
}
}
</script>
<div id=”mydiv”>
<p>icerik1</p>
<p>icerik2</p>
<p>icerik3</p>
<p>icerik4</p>
</div><br>
<input type=”button” value =”kalın yap” pnClik=”kalinyap()” />
burda kalın yap butonuna tıkladığımızda kalinyap() fonksiyonumuz tetikleniyor.iki tane seçici ile bir div i id sinden diğeride paragrafı tag isminden seçtik saha sonra fon döngüsü ile sırası ile tagları dolaştık.
html tagları düğüm yapısında olduğu için i ile aşağıya doğru bütün tagları sırası ile seçebiliyoruz.Bu konuyu birazdan düğüm yapısına göre seçmede daha detaylı anlatıcam.
Daha sonrada style metodunun fontsStyle parametresi ile içeriğe etki ettik.
2-getElementsByName
Kısa bir örnek vermek istiyorum sanırım yeteri kadar açıklayıcı olur.
var nesne = document.getElementByName(’haberNesne’);
ismi haberNesne olan html unsurunu seçtik.
3-element.FirstChild
html unsurları xml yapısında düğümlerden oluşur ve biz bu düğümler arasında javascript ile geçiş yapabiliriz.
Burda biraz xml yapısından bahsedicem.XML bizim verilerimizi karmaşık yapıdan kurtararak belirli bir standarta almamızı sağlayan bi markup dildir.
yani verilerimizi etiketliyerek daha kolay erşimi sağlar.Javascript de bu özellikden faydalanarak html nodlarına ulaşabilir
<div id=”anadiv”>—->parent
<div id=”altdiv1″>içerik1</div>—>firstChild
<div id=”altdiv2″>içerik2</div>—->childNodes[0]
</div>
anadiv burada parent yani ebeveyn dir.Diğerleri onun çocuğu yani alt düğümleridir.Bu ağaç yapısı bize kolay erişimi sağlar.altdiv1 firstChild veya childNodes[0] altdiv2 childNodes[1] dir.Bir alt düğüm daha olsa o zamanchildNode[2] olacakdı.
var ilkdügüm=document.getElementByI(’anadiv’).firstChild
bize altdiv1 ‘i
var ikincidügüm =document.getElementById(’anadiv’).childNodes[0]
bize altdiv2 yi verir.
birazda paremtrelerden bahsedeyim
ilkdügüm.id bize aldiv1 idsini döndürür
ilkdügüm.nodeName bize DIV döndürür
ilkdügüm.nodeType bize 1 yani kaçıncı altdüğümde olduğumuzu gösterir
ilkdügüm.nodeValue bize null döndürür çünkü düğümün value parametresi boş
ilkdügüm.innerHTML bize içerik1 i döndürü.
element.lastChild
bize son düğüm elemanını verir.Örnekde altdiv2
element.hasChildNodes()
elementin altında düğüm varsa true yoksa false döner.
Seçiciler konu şimdilik bu kadar artık javascript ile istediğimiz nesneyi seçebiliyoruz.Ancak şunu belirteyim ileride jquery anlatmayı düşünüyorum ki jquery hazır kütüphane kullandığımız javascript yazım şeklidir.Bu kütüphane ile css yazar gibi html elementlerini seçebileceğimizi göreceğiz.Bu çok büyük kolaylık sağlıyor bize ama herzaman bahsettiğim gibi temeli sağlamk atmak lazım onun için bütün bu konular üzerinde durmak istedim.Jquery anlatmaya başlamadan önce css anlatıcam ve hmtl i nasıl dreamweaver olmadan şekkilendiriyoruz bundan bahsedicem.Daha sonra jquery ile css kodları gibi html unsurlarıan ulaşıcaz.Şimdilik bu kadar.
Yazar Erkut Güneri
Tags: java, java script, js, seçiciler
