Java Script Doküman Nesnesi
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:
Javascript:
<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.
Javascript:
<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.
Javascript:
<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.
Javascript:
<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>
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:
Javascript:
<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.
Javascript:
<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.
Javascript:
<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.
Javascript:
<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>
Java Script Dersleri
- Java Script Fonksiyonlar
- Java Script Yazım Kuralları
- Java Script Aritmetik İşlemler
- Java Script Değişkenler
- Java Script'e Giriş
- Java Script Akış Denetimi
- Java Script Döngü Denetimi
- Java Script Mantıksal İşlemler
- Java Script Pencere Komutları
- Java Script Metin Komutları
- Java Script Form Nesnesi
- JavaScript ile Sayfalama
- Java Script Diziler
- Java Script Zaman Komutları
- Java Script Matematik Komutları
- Java Script Olaylar
- Java Script ve DHTML
- Java Script Doküman Nesnesi
- Java Script Pencere Nesnesi
- Java Script Gözatıcı Komutları
- Java Script Olay Komutları
- Java Script Sayfa Nesnesi
- Java Script Tablo