Bu yazımızda, htmlDOM kullanımı açısından, web tasarım uygulamalarınızda faydalı olacağını düşündüğüm birkaç uygulamayı ve özelliği inceleyeceğiz.
Genel olarak DOM kullanımında ana nesnelerimizden biri 'document' nesnesidir, bunu web sayfamızın genel yapısı olarak düşünebiliriz, sayfa içerisindeki nesnelerimize bu nesnenin metodlarıyla ulaşmamız mümkün. Konu çok geniştir, detaylara fazla girmeden, benim de çok kullandığım birkaç örnekle yetineceğim.
İlk uygulamamız, sayfa içerisindeki linklere ulaşmak ve bu linklerle ilgili bazı özellikleri seçmek:
Farzedelim sayfamızda aşağıdaki yapıda anchor(<a>) nesnelerimiz olsun:
<a href="htmldersler.html" name="html">HTML Dersler</a><br />
<a href="cssdersler.html" name="css">CSS Dersler</a><br />
<a href="phpdersler.html" name="php">PHP Dersler</a><br />
Bu linkleri ulaşmamız için gereken yapı: "document.anchor", bu yapı ile sayfadaki tüm linkleri sorgulamış oluyoruz, "name" özelliklerini kullanarak da istediğimiz linke ulaşabiliriz.
Not: Bu verileri elde etmek için bir olayı ilgili bir fonksiyona atamanız gerekir, bu yazıda bu şekilde bir uygulama yapmadım, ama siz yapıları kullanarak web tasarım uygulamalarınızda bu fonksiyonları ve olayları oluşturabilirsiniz.
Sayfadaki link sayılarını elde etmek için aşağıdaki javascript kodlarını yazmamız yeterlidir, biz burda adetleri uyarı mesajıyla gösterdik
1-Link sayısı:
alert(document.anchors.length);
2-Birinci Linkin içeriğine elde etmek ulaşmak için anchors[0].innerHTML (anchor dizininin 1.elementi):
alert(document.anchors[0].innerHTML);
3-Sayfadaki form adeti:
alert(document.forms.length);
4-Sayfadaki birinci formun isim (name) değeri:forms[0].name
alert(document.forms[0].name);
5-Sayfadaki image adeti:
alert(document.images.length);
6-Sayfadaki birinci image'ın id değeri:
alert(document.images[0].id);
7-Sayfanın son revize tarihi:
alert(document.lastModified);
8-Sayfanın title değeri:
alert(document.title);
9-Sayfa içindeki nesneye ID değeri ile ulaşmak:
document.getElementById("idDegeri");
10-Sayfa içindeki nesneye isim (name) değeri ile ulaşmak:
document.getElementsByName("isimDegeri");
10-Sayfa içindeki nesnelere etiket (tag) değerleriyle ulaşmak: tagName olarak, input, span, p, table, tr, td vb.
document.getElementsByTagName("tagName");
"getElementById, getElementsByName" vb metodlarla ulaştığınız nesnelerin elemanlarına da "elements[]" dizinini kullanarak ulaşabilirsiniz.
Uygulama:
Aşağıdaki formda, gönder butonuna basıldığında text kutularının dolu olup olmadığı kontrol ediliyor ve ilgili kutu için mesaj gönderiliyor.
Not: Bu uygulama için esas kontroller yapılmamıştır, sadece genel mantık ve çalışma prensibi anlatılmıştır.
Form yapısı:
<form name="form1" id="form1" action="#" method="post" onsubmit="checkText();">
İsim: <input type="text" name="isim" /><br />
Soyad: <input type="text" name="soyad" /><br />
Eposta: <input type="text" name="email" /><br />
Adres: <input type="text" name="adres" /><br />
<input type="submit" name="submit" value="Gönder" />
</form>
Javascript yapısı: checkText() fonksiyonu
<script type="text/javascript">
function checkText(){
var form1 = document.getElementById("form1");
textNo=form1.length;
for(i=0; i<textNo-1; i++){
if(form1.elements[i].value==""){
alert(form1.elements[i].name+" kısmı boş bırakılamaz");
}
}
}
</script>
Açıklamalar:
- 3. ID değeri "form1" olan nesneyi form1 değişkenine atadık
- 4. Formun eleman sayısını tespit ettik, "buton" da elemanlardan biri olduğu için, sadece text kutularına ulaşmak için 1 çıkardık
- 5. For döngüsüyle form içindeki elemanlara teker teker ulaşıp "değerlerinin (value)" boş olup olmadığını kontrol ettik, eğer boş ise elemanın "name" değerini kullanarak uyarı mesajımızı gönderdik.
Şimdilik bu kadar, kolay gelsin, görüşmek üzere...
