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:
Kod: Tümünü seç
<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> 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.
Kod: Tümünü seç
<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>
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
Kod: Tümünü seç
<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 için document.bgcolor komutunu kullanırız.
Kod: Tümünü seç
<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>Volkan Derinbay'a tşkler.