Doküman (document) nesnesi HTML dokümanının tamamını ifade etmektedir ve HTML’de kullandığımız <p>, <h1>, <div>, vb. gibi tüm komutları içerir. Doküman nesnesini HTML’deki <body> bölümü olarak düşünebilirsiniz.
Aslında ilk JavaScript dersinden başlayarak, document.write() komutu ile HTML 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 tanımlanır. Tanımlanan doküman dokümantanımı.innerHTML ile içerik deÄŸiÅŸtirilir:
Â
<html>
<head>
<title>InnerHTML</title>
<script language=”JavaScript”>
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>
</html>Â
Â
Doküman Başlığını Belirlemek
HTML’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.
Â
Â
<html>
<head>
<title>Sayfa Başlığını Değiştirmek</title>
</head>
<body>
<p>Sayfa baÅŸlığı: <b><script language=”JavaScript”>document.write(document.title)</script></b></p>
</body>
</html>
Bu örnek biraz basit oldu ama document.title komutunun ne işe yaradığını gösteriyor. Form araç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 HTML’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.
Â
Â
<html>
<head>
<title>getElementById() Kullanımı</title>
<script language=”JavaScript”>
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 HTML nesnesi olduÄŸumu görürsünüz!!!</h1>
<h2 id=”eleman2″ onclick=”bul(‘eleman2′)”>Bana tıklarsanız, hangi HTML nesnesi olduÄŸumu görürsünüz!!!</h2>
<h3 id=”eleman3″ onclick=”bul(‘eleman3′)”>Bana tıklarsanız, hangi HTML nesnesi olduÄŸumu görürsünüz!!!</h3>
<h4 id=”eleman4″ onclick=”bul(‘eleman4′)”>Bana tıklarsanız, hangi HTML nesnesi olduÄŸumu görürsünüz!!!</h4>
<p id=”eleman5″ onclick=”bul(‘eleman5′)”>Bana tıklarsanız, hangi HTML nesnesi olduÄŸumu görürsünüz!!!</p>
<div id=”eleman6″ onclick=”bul(‘eleman6′)”>Bana tıklarsanız, hangi HTML nesnesi olduÄŸumu görürsünüz!!!</div>
</body>
</html>
Arka Plan Rengini DeÄŸiÅŸtirmek
Arka plan rengini değiştirmek için document.bgcolor komutunu kullanırız.
<html>
<head>
<title>Arka Plan Renkleri</title>
<script language=”JavaScript”>
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>
</html>
Yorumlar
Yorum Yok
Yorumunuzu Ekleyin
Yorum eklemek için giris yapmalısınız.