HAZIRLAYAN MÜSENNA ÖZBEK

Document Object Model(Belge Nesne Modeli)

Belge nesnesi html belgesinin tamamını temsil eder.

html belgesi tarayıcıya yüklendiğinde, bir belge nesnesi haline gelir. html belgesini temsil eden kök öğedir. Özellikleri ve yöntemleri vardır. Doküman nesnesi yardımıyla web sayfamıza dinamik içerikler ekleyebiliriz.

Daha önce de belirtildiği gibi, pencerenin nesnesidir. 

W3C'ye göre - "W3C Belge Nesne Modeli (DOM), programların ve komut dosyalarının bir belgenin içeriğine, yapısına ve stiline dinamik olarak erişmesini ve güncellemesini sağlayan platform ve dilden bağımsız bir arayüzdür."

Belge nesnesinin özellikleri

Belge nesnesi tarafından erişilebilen ve değiştirilebilen belge nesnesinin özelliklerini görelim. 

Belge nesnesi yöntemleri

Belgenin içeriğine yöntemleriyle erişebilir ve değiştirebiliriz.

Belge nesnesinin önemli yöntemleri şunlardır:

Yöntem

write("string"):Verilen dizeyi doucment üzerine yazar.

writeln("dize"):Verilen dizeyi sonunda yeni satır karakteri olacak şekilde doucment'e yazar.

getElementById():Verilen id değerine sahip öğeyi döndürür.

getElementsByName():Verilen ad değerine sahip tüm öğeleri döndürür.

getElementsByTagName():Verilen etiket adına sahip tüm öğeleri döndürür.

getElementsByClassName():Verilen sınıf adına sahip tüm öğeleri döndürür.

Belge nesnesine göre alan değerine erişme

Bu örnekte, kullanıcı tarafından giriş metninin değerini alacağız. Burada, name alanının değerini almak için document.form1.name.value kullanıyoruz.

Burada, belge html belgesini temsil eden kök öğedir.

form1, formun adıdır.

name, giriş metninin öznitelik adıdır.

value, giriş metninin değerini döndüren özelliktir.

Hoş geldiniz mesajı ile adı yazdıran belge nesnesinin basit örneğini görelim.

<script type="text/javascript">

function printvalue(){  

var name=document.form1.name.value;

alert("Hoş geldiniz: "+ad);

}  

</betik>  

<form adı = "form1">

Name:<input type="text" name="name"/> girin.

<input type="button" onclick="printvalue()" value="print name"/>

</form>  

Document.getElementById() Yöntemi

document.getElementById() yöntemi, belirtilen id'nin öğesini döndürür.

Önceki sayfada, giriş değerinin değerini almak için document.form1.name.value dosyasını kullandık. Bunun yerine, giriş metninin değerini almak için document.getElementById() yöntemini kullanabiliriz. Ancak giriş alanı için id tanımlamamız gerekiyor.

Verilen sayının küpünü yazdıran document.getElementById() yönteminin basit örneğini görelim.

<script type="text/javascript">

getcube(){ fonksiyonu

var number=document.getElementById("number").value;

uyarı (sayı * sayı * sayı);

}  

</betik>  

<form>  

No:<input type="text" id="number" name="number" /><br/> girin.

<input type="button" value="cube" onclick="getcube()" />

</form>  

Document.getElementsByName() Yöntemi

document.getElementsByName() yöntemi, belirtilen adın tüm öğelerini döndürür.

getElementsByName() yönteminin sözdizimi aşağıda verilmiştir:

1. document.getElementsByName("ad")

Burada isim gereklidir.

Document.getElementsByName() Yöntemi örneği

Bu örnekte, toplam cinsiyet sayısını sayacağız. Burada, tüm cinsiyetleri elde etmek için getElementsByName() yöntemini kullanıyoruz.

<script type="text/javascript">

fonksiyon totalelements()

{  

var allgenders=document.getElementsByName("cinsiyet");

alert("Toplam Cinsiyetler:"+allgenders.length);

}  

</betik>  

<form>  

Erkek:<giriş türü="radyo" adı="cinsiyet" değeri="erkek">

Kadın:<giriş türü="radyo" adı="cinsiyet" değeri="kadın">

<input type="button" onclick="totalelements()" value=" Toplam Cinsiyet">

</form>  

Document.getElementsByTagName() Yöntemi

document.getElementsByTagName() yöntemi, belirtilen etiket adının tüm öğelerini döndürür.

getElementsByTagName() yönteminin sözdizimi aşağıda verilmiştir:

1. document.getElementsByTagName("ad")

Burada isim gereklidir.

Document.getElementsByTagName() Yöntemi örneği

Bu örnekte, belgede kullanılan toplam paragraf sayısını sayacağız. Bunu yapmak için, toplam paragrafları döndüren document.getElementsByTagName("p") yöntemini çağırdık.

<script type="text/javascript">

function countpara(){  

var totalpara=document.getElementsByTagName("p");

alert("total p etiketleri: "+totalpara.length);

}  

</betik>  

<p>Bu bir pragraf</p>

<p>Burada getElementByTagName() yöntemiyle toplam paragraf sayısını sayacağız. </p>

<p>Basit örneği görelim</p>

<button onclick="countpara()">count paragraph</button>

Yukarıdaki örneğin çıktısı:

Bu bir pragraftır

Burada getElementByTagName() yöntemiyle toplam paragraf sayısını sayacağız.

Basit örneği görelim

paragraf sayımı

Document.getElementsByTagName() Yöntemine başka bir örnek

Bu örnekte, belgede kullanılan toplam h2 ve h3 etiketlerinin sayısını sayacağız.

<script type="text/javascript">

function counth2(){  

var totalh2=document.getElementsByTagName("h2");

alert("total h2 etiketleri: "+totalh2.length);

}  

function counth3(){  

var totalh3=document.getElementsByTagName("h3");

alert("total h3 etiketleri: "+totalh3.length);

}  

</betik>  

<h2>Bu h2 etiketidir</h2>

<h2>Bu h2 etiketidir</h2>

<h3>Bu h3 etiketidir</h3>

<h3>Bu h3 etiketidir</h3>

<h3>Bu h3 etiketidir</h3>

<button onclick="counth2()">count h2</button>

<button onclick="counth3()">count h3</button>

Yukarıdaki örneğin çıktısı:

Bu h2 etiketi

Bu h2 etiketi

Bu h3 etiketi

Bu h3 etiketi

Bu h3 etiketi