images

Belge içerisindeki img tag’ına (etiketine) sahip tüm elemanların referansını elde etmek için kullanılır. Eleman referansları birden fazla ise her bir eleman döngü ile elde edilebilir.

<body>
<img src="Javascript_Resmi.jpg"> 
<img src="HTML_Resmi.jpg"> 
<img src="CSS_Resmi.jpg">

<script>

document.images[0].style.border 	=	"1px solid black";
document.images[1].style.border 	=	"1px dotted black";
document.images[2].style.border 	=	"1px solid black";

</script>
</body>

plugins

Browser’daki (tarayıcıdaki) tüm eklentilerin referansını elde etmek için kullanılır. Eklenti referansları birden fazla ise her bir eklenti döngü ile elde edilebilir.

<script>

var deger	=	navigator.plugins.length;
for(var baslangic = 0; baslangic<deger; baslangic++){
	var sonuc	=	navigator.plugins[baslangic];
	if(sonuc.name){
		document.write("Plugin Adı : " + sonuc.name + "<br />");
	}
	if(sonuc.filename){
		document.write("Dosya : " + sonuc.filename + "<br />");
	}
	if(sonuc.description){
		document.write("Açıklama : " + sonuc.description + "<br />");
	}
	
	var plugindegeriuzunlugu	=	sonuc.length;
	for(var say = 0; say<plugindegeriuzunlugu; say++){
		var ikincideger		=	sonuc[say];
		if(ikincideger.type){
			document.write("Mime Type : " + ikincideger.type + "<br />");
		}
		if(ikincideger.description){
			document.write("Açıklama : " + ikincideger.description + "<br />");
		}
		if(ikincideger.suffixes){
			document.write("Uzantı : " + ikincideger.suffixes + "<br />");
		}
	}
}

</script>

createAttribute()

Belge içerisindeki istenilen bir elemana yeni bir özellik / nitelik node’u (düğümü) oluşturur ve oluşturduğu bu node’u (düğümü) bir node object (düğüm nesnesi) olarak geriye döndürür.

setAttributeNode()

createAttribute() metodu ile oluşturulan özellik node’unu (düğümünü), node object’ine (düğüm nesnesine) uygular.

<body>
<h2>Javascript Eğitim Seti</h2>
CodernSoft <span id="alan">Enes Çetinkaya</span><br /><br />
<button onclick="ornek()">Uygula</button>

<script>

function ornek(){
	var deger		=	document.getElementById("alan");
	var ozellik		=	document.createAttribute("title");
	ozellik.value 	=	"Eğitmen";
	deger.setAttributeNode(ozellik);
}

</script>
</body>

createElement()

Belge içerisinde yeni bir HTML eleman node’u (düğümü) oluşturur ve oluşturduğu bu node’u (düğümü) bir node object (düğüm nesnesi) olarak geriye döndürür.

createTextNode()

createElement() metodu ile oluşturulan HTML elemanına metin node’u (düğümü) oluşturur ve oluşturduğu bu node’u (düğümü) bir node object (düğüm nesnesi) olarak geriye döndürür.

appendChild()

Bir node’u (düğümü) belirtilecek olan herhangi bir elemanın içerisine en sonda olmak üzere eklemek için kullanılır.

<body>
<button onclick="islem()">Ekle</button>
<div id="alan">...</div>

<script>

function islem(){
	var sonuc	=	document.createElement("DIV");
	var metin	=	document.createTextNode("Javascript eğitim seti.");
	sonuc.appendChild(metin);
	document.getElementById("alan").appendChild(sonuc);
}
</script>
</body>

createComment()

Belge içerisine yeni bir açıklama node’u (düğümü) oluşturur ve oluşturduğu bu node’u (düğümü) bir node object (düğüm nesnesi) olarak geriye döndürür

<body>
<button id="bir" onclick="ornekbir()">Birinci Açıklama Metnini Ekle</button><button id="iki" onclick="ornekiki()">İkinci Açıklama Metnini Ekle</button>
<script>

function ornekbir(){
	var hedef	=	document.createComment("Burası birinci açıklama metnidir.");
	document.body.appendChild(hedef);
}

function ornekiki(){
	var hedef	=	document.createComment("Burası ikinci açıklama metnidir.");
	document.body.appendChild(hedef);
}

</script>
</body>

addEventListener()

Belgeye event (olay) işaretleyicisi / dinleyicisi eklemek için kullanılır. İşaretlenen / dinlenen event (olay) belgede gerçekleştirilecek olur ise belirtilecek olan fonksiyon veya fonksiyonlar çalışır.

<body>
<div id="sonucalani"></div>
<script>

document.addEventListener("mouseover", ornekbir);
document.addEventListener("click", ornekiki);
document.addEventListener("mouseout", ornekuc);

function ornekbir(){
	document.getElementById("sonucalani").innerHTML +=	"Mouse Over Oldu.<br />";
}

function ornekiki(){
	document.getElementById("sonucalani").innerHTML +=	"Tıklama Oldu.<br />";
}

function ornekuc(){
	document.getElementById("sonucalani").innerHTML +=	"Mouse Out Oldu.<br />";
}

</script>
</body>

removeEventListener()

Belgeye addEventListener() metodu ile eklenmiş olan event (olay) işaretleyicisini / dinleyicisini silmek için kullanılır.

<body>
<button onclick="sonlandir()">Olay Dinleyicisini Kaldır</button><br />
<div id="sonucalani"></div>
<script type="text/javascript" language="javascript">

document.addEventListener("mousemove", ornek);

function ornek(){
	document.getElementById("sonucalani").innerHTML = Math.random();
}

function sonlandir(){
	document.removeEventListener("mousemove", ornek);
}

</script>
</body>

dir

Belge içerisindeki metinlerin yazılış yönü referansını elde etmek için kullanılır. Ayrıca belge içerisindeki metinlerin yazılış yönünün atamasını ayarlamak içinde kullanılır.

ltr : left to right (soldan sağa)
rtl : right to left (sağdan sola)

<body>
<div id="metinalani" dir="rtl">Javascript eğitim seti</div>

<script>

document.getElementById("metinalani").dir = "ltr";
document.getElementById("metinalani").dir = "rtl";

</script>

open()

Belge içerisinden yeni bir HTML çıktı akışı açmak için kullanılır.

close() : open() metodu ile açılan HTML çıktı akışını kapatmak / sonlandırmak için kullanılır.
Parametreler :
1. Parametre : MimeType
2. Parametre : Geçmiş aktarımı

<body>
<button onclick="ornek()">HTML Akışı Aç</button>
<script>

function ornek(){
	var islem	=	window.open();
	islem.document.open("text/html", "replace");
	islem.document.write("<html><head><title>Yeni Sayfa Başlığı</title></head><body>Merhaba</body></html>");
	islem.document.close();
}

</script>
</body>

styleSheets

Belge üzerinde etkisi olan tüm stil sayfalarının nesne referansını elde etmek için kullanılır. Stil sayfası referansları birden fazla ise her stil sayfası referansı döngü ile elde edilebilir.

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Extra Eğitim</title>
<style>
body{ color:red; font-size:25px; }
p{ color:blue; }
div{ color:yellow; }
</style>
<style>
body{ font-weight:bold; }
</style>

</head>
<body>
CodernSoft Yazılım & Danışmanlık<br />
<script>

document.styleSheets[0].cssRules[0].style.backgroundColor = "yellow";

</script>
</body>
</html>