Javascript Eğitim Dersleri #012

Sayfa içerisindeki her tür objeye erişebiliriz. Geçen derste bazı objelerin koleksiyon ( yani object ) şeklinde durduğundan bahsetmiştik. İstersek tek bir hareketle, o sayfada bulunan tüm linkleri ( <a> ), yada sayfa içindeki tüm <p> leri modifiye edebiliriz.

Button’a tıklandığında show_info(); fonksiyonu çağrılır. Sayfa içindeki tüm linkler ( ankorlar ) document.links objesindedir. Sırasıyla tüm linklere; document.links[ 0 ] , document.links[ 1 ] , document.links[ n ] şeklinde erişebiliriz.

12.satırda da görüldüğü gibi, l objesi aynen bir konteyner gibi çalışır. l[ 0 ].innerHTML aynen biraz sonra kullanacağımız document.getElementById( 'result' ).innerHTML gibidir aslında.

Loop içinde sırasıyle tüm linklere eriştik, innerHTML’ini, href’ini aldık... Boş bir String’in içini doldurduk ve loop bitiminde ID’si “result” olan div’in içine yazdık.

Gereken elementi yakaladıktan sonra, pek çok özelliği modifiye edebiliriz, hatta yeni özellikler bile ekliyebiliriz. setAttribute metodu ile bu işi yaparız. Eğer tüm bu linklere target eklememiz gerekseydi; 11 - 12 arasına yeni bir satır eklememiz gerekecekti :

1.   l[ i ].setAttribute( 'target' , "_blank" );

D.O.M elementlerinin ne tür metodları olduğunu öğrenmek için ya Firebug ile console.dir( OBJE ) yapacaksınız yada dökümanlara göz atıcaksınız.

Derste yaptığımız diğer bir örnek için tıklayın.

1. <div id="canvas">
2.  <h1>Linkler</h1>
3.  <p><a href="http://www.google.com">Google</a></p>
4.  <p><a href="http://www.yahoo.com">Yahoo</a></p>
5.  <p><a href="http://www.microsoft.com">Microsoft</a></p>
6.  <hr/>
7.  <p><button onclick="show_info();">Link Bilgisi</button></p>
8.  <hr/>
9.  <div id="result"></div>
10. </div>

1. function show_info()
2. {
3.  var d = document;
4.  var l = d.links;
5.  
6.  var strHtml = '';
7.  strHtml+= '<p>Bu sayfada toplam : <strong>'
8.     + l.length
9.     + '<\/strong> tane link bulunuyor<\/p>';
10.  for( var i = 0; i < l.length; i++ )
11.  {
12.   var strLinkTitle = l[ i ].innerHTML;
13.   var strLinkURL = l[ i ].href;
14.   strHtml+= '<p>Sayfa : '
15.      + strLinkTitle + ' , Link : '
16.      + strLinkURL + '<\/p>';
17.  }
18.  document.getElementById( 'result' ).innerHTML = strHtml;
19. }

Örnek kod için tıklayın.