myNotlar Logo

document.getElementById()


Internet Explorer Firefox Opera

document.getElementById metodu, id özelliği belirtilen elementin referansının alınmasını sağlar. Aynı id kimliğine sahip başka bir element olması durumunda sadece ilk elementi verir. Diğerlerine erişim sağlamaz.

Sözdizimi

element = document.getElementById(kimlik)
kimlikDoküman üzerinde elementi bulmak için kullanılacak eşsiz id özelliğini ifade eder.

Dönüş Değeri

elementelement nesne referansı. Doküman üzerinde belirtilen id bulunamazsa null döner.

HTML DOM, HTML dokümanının görünen ve görünmeyen bütün bileşenlerinin (düğümlerinin/elementlerinin) ayrı ayrı tanımlanarak nesnel olarak modellenmesini sağlar. Bu modelleme de nesnelere erişim, her ne kadar getElementById metodu ile sınırlı olmasa da, bu metod elementlere erişim için kurulan bazı döngüleri gerektirmeden elementlerin id özelliği ile direk ve kolay erişim sağlar. getElementById metodunun sağladığı bu erişim kolaylığından faydalanmak için tasarım aşamasında, "her element'e id özellikleri ile eşsiz bir kimlik tanımlanmalıdır" katı ama ufak kuralını benimsemek, geliştireceğiniz uygulamaların kalitesini arttıracaktır.

Aşağıdaki örnek, içiçe yerleştirilmiş 3 tablodan en içtekinin id özelliği belirlenmiş sütunlarından birine getElementById metodu ile erişilerek, innerHTML özelliği ile içeriğinin değiştirilmesini göstermektedir.

<script type="text/javascript">

function degistir()
{
	var yeniIcerik = document.getElementById('giris').value;
	document.getElementById('ornekSutun').innerHTML = yeniIcerik;
}
</script>

<style type="text/css">
.cssTablo {
   border:solid 1px blue;
}
.cssTablo table {
   border:solid 1px green;
}
.cssTablo table table {
   border:solid 1px red;
}
.cssTablo table table td {
   width:30px;
   height:30px;
}
#ornekSutun
{
   background-color:#e0e0e0;
   color:navy;
}
</style>
<table class="cssTablo">
   <tr><td></td><td></td></tr>
   <tr><td></td>
      <td>
         <table>
            <tr><td></td><td></td></tr>
            <tr><td></td>
               <td>
                  <table>
                     <tr><td></td><td></td></tr>
                     <tr><td></td><td id="ornekSutun"></td></tr>
                  </table>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<br/>
Değişecek içerik : <input type="text" id="giris"/><br/>
<input type="button" value="Değiştir" onClick="degistir()"/>
Test Edin

Değişecek içerik :
İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | YasinKa |