Doküman (document) nesnesi dokümanının tamamını ifade etmektedir 'de kullandığımız <p>, <h1>, <div>, vb. gibi tüm komutları içerir. Doküman nesnesini 'deki <body> ü olarak düşünebilirsiniz.

Aslında ilk dersinden başlayarak, document.write() komutu ile dokümanlarına yazı eklemeyi öğrenmiştik.

Doküman Nesnesinin İçeriğini Değiştirmek
Doküman nesnenin içeriğini değiştirmek için innerHTML kullanılır. Önce doküman id="…" parametresi ile mlanır. mlanan doküman dokümantanımı.innerHTML ile içerik değiştirilir:

<>
<head>
<title>InnerHTML</title>
<script language="">
function cikis()
{
ilan.innerHTML="Barımızdan çıkış 50 milyon TL!!!"
ilan.style.color="blue"
}
function giris()
{
ilan.innerHTML="Barımıza giriş bedavadır."
ilan.style.color="black"
}
</script>
</head>
<body>

<h1 id="ilan" onmouseover="cikis()" onmouseout="giris()" >Barımıza giriş bedavadır.</h1>

</body>
</>
[Sayfayı göster] [Temizle] [İlk haline getir]

Doküman Başlığını Belirlemek
'de <title> komutu ile sayfa başlığını belirliyorduk. Sayfa başlığını değiştirmek için document.title komutunu kullanacağız.

document.title komutu, sayfa başlığı değerini taşıyor. Bu değeri değiştirdiğimizde sayfa başlığı da değişir.

<>
<head>
<title>Sayfa Başlığını Değiştirmek</title>
</head>
<body>
<p>Sayfa başlığı: <b><script language="">document.write(document.title)</script></b></p>
</body>
</>

[Sayfayı göster] [Temizle] [İlk haline getir]

Bu örnek biraz basit oldu ama document.title komutunun ne işe yaradığını gösteriyor. ları sayfasından sonra sayfa başlığını ziyaretçiye yazdırabiliriz. Veya saat bilgisini başlığa yansıtabiliriz.

Doküman Nesnesini Türünü Belirlemek
Daha önce belirttiğimiz gibi doküman nesnesi 'in herhangi bir doküman nesnesi olabilir: <p>, <h1>, <div>, vb. Nesne ne olursa olsun id parametresiyle isimlendirerek o nesne içeriğine dilediğimiz komutları verebiliriz.

Peki elimizde id ile verdiğimiz ismi kullanarak, nesnenin ne olduğunu sayfada gösterebilir miyiz? (Bazen oldukça işe yarıyor.) O nesnenin ne olduğunu bilmek istersek getElementById().tagName komutunu kullanırız.

<>
<head>
<title>getElementById() Kullanımı</title>
<script language="">

function bul(metin)
{
var x=document.getElementById(metin)
alert("Ben bir <" + x.tagName + "> elemanıyım")
}
</script>
</head>
<body>
<h1 id="eleman1" onclick="bul('eleman1')">Bana tıklarsanız, hangi nesnesi olduğumu görürsünüz!!!</h1>
<h2 id="eleman2" onclick="bul('eleman2')">Bana tıklarsanız, hangi nesnesi olduğumu görürsünüz!!!</h2>
<h3 id="eleman3" onclick="bul('eleman3')">Bana tıklarsanız, hangi nesnesi olduğumu görürsünüz!!!</h3>
<h4 id="eleman4" onclick="bul('eleman4')">Bana tıklarsanız, hangi nesnesi olduğumu görürsünüz!!!</h4>
<p id="eleman5" onclick="bul('eleman5')">Bana tıklarsanız, hangi nesnesi olduğumu görürsünüz!!!</p>
<div id="eleman6" onclick="bul('eleman6')">Bana tıklarsanız, hangi nesnesi olduğumu görürsünüz!!!</div>
</body>
</>

[Sayfayı göster] [Temizle] [İlk haline getir]

Arka Plan Rengini Değiştirmek
Arka plan rengini değiştirmek için document.bgcolor komutunu kullanırız.

<>
<head>
<title>Arka Plan Renkleri</title>
<script language="">

function renklendir(n)
{
switch(n)
{
case 1: document.bgColor="red"
break
case 2: document.bgColor="yellow"
break
case 3: document.bgColor="blue"
break
case 4: document.bgColor="orange"
break
case 5: document.bgColor="green"
break
case 6: document.bgColor="crimson"
break
default: document.bgColor="white"
break
}
}
</script>
</head>

<body>
<a href="#" onclick="renklendir(1)">Kırmızı</a><br /><br />
<a href="#" onclick="renklendir(2)">Sarı</a><br /><br />
<a href="#" onclick="renklendir(3)">Mavi</a><br /><br />
<a href="#" onclick="renklendir(4)">Turuncu</a><br /><br />
<a href="#" onclick="renklendir(5)">Yeşil</a><br /><br />
<a href="#" onclick="renklendir(6)">Bordo</a><br /><br />
<a href="#" onclick="renklendir(7)">Beyaz</a><br /><br />
</body>
</>

kaynak: ordan burdan

Tags: , , , , , , , , , , , , , , , , , , ,
Javascript - Document Döküman Nesnesi (scripti, nasıl, nedir?) konusu
Benzer yazılar:
    Benzer yazı yok