JavaScript – DOM Metodları-5

0
13

querySelector()

CSS (Cascading Style Sheets) (Basamaklı Stil Şablonları) seçicileri ile belgedeki bir elemanın referansını elde etmek için kullanılır.

<body>
<div id="bir"><span id="birbir">Enes Çetinkaya</span> <span id="biriki">Javascript</span> <a class="deneme">Codernsoft</a></div>
<div id="iki"><span id="ikibir">Enes Çetinkaya</span> <span id="ikiiki">Css</span> Codernsoft</div>
<div class="bir">Enes Çetinkaya Codernsoft</div>
<div class="iki">Enes Çetinkaya Codernsoft</div>
<br /><br />
<button onclick="ornek()">İşlemi Gerçekleştir</button>
<script>

function ornek(){
	var sonuc	=	document.querySelector(".bir").innerHTML;
	alert(sonuc);
}

</script>
</body>

querySelectorAll()

CSS seçicileri ile belgedeki eleman veya 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>

<div class="deneme">Enes Çetinkaya <span class="deneme">Codernsoft </span> Yazılım</div>
<div class="deneme">Enes Çetinkaya <span class="deneme">Codernsoft </span> Yazılım</div>
<div class="deneme">Enes Çetinkaya <span class="deneme">Codernsoft </span> Yazılım</div>
<div class="deneme">Enes Çetinkaya <span class="deneme">Codernsoft </span> Yazılım</div>
<p class="deneme">Enes Çetinkaya <span class="deneme">Codernsoft </span> Yazılım</p>
<p class="deneme">Enes Çetinkaya <span class="deneme">Codernsoft </span> Yazılım</p>
<br />
<span id="sonucalani"></span>
<br /><br />
<button onclick="ornek()">Buton</button>

<script>

function ornek(){
	var sayi	=	document.querySelectorAll("span.deneme").length;
	for(var baslangic = 0; baslangic<sayi; baslangic++){
		document.querySelectorAll("span.deneme")[baslangic].style.backgroundColor = "yellow";;
	}
}

</script>
</body>

adoptNode()

Belge içerisine başka bir belgeden node (düğüm) eklemek için kullanılır. Eklenecek olan node’un (düğümün) varsa tüm alt node’larıda (düğümleride) işleme dahil edilerek ilgili tüm node’lar (düğümler) diğer belgeden kaldırılır.

<body>
<iframe src="cerceve.html" style="width:500px; height:500px;"></iframe>
<iframe src="cerceve.html" style="width:500px; height:500px;"></iframe>
<br /><br />
<button onclick="ornek()">Test</button>
<br /><br />
<script>


function ornek(){
	var cerceve		=	document.getElementsByTagName("IFRAME")[1];
	var alan		=	cerceve.contentWindow.document.getElementsByTagName("DIV")[1];
	var sonuc		=	document.adoptNode(alan);
	document.body.appendChild(sonuc);
}

</script>
</body>

importNode()

Belge içerisine başka bir belgeden node (düğüm) eklemek için kullanılır. Eklenecek olan node’un (düğümün) varsa tüm alt node’larıda (düğümleride) işleme dahil edilir.

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

<body>
<iframe id="cevercevealani" src="anasayfa.html" style="width:500px; height:500px;"></iframe>
<br />
<button onclick="ornek()">İŞLEM YAP</button><br /><br />
<script>

function ornek(){
	var cerceve		=	document.getElementById("cevercevealani");
	var alan		=	cerceve.contentWindow.document.getElementsByTagName("DIV")[0];
	var sonuc		=	document.importNode(alan, true);
	document.body.appendChild(sonuc);
}

</script>
</body>

normalize()

Belge içerisindeki boş text node’larını (metin düğümlerini) kaldırarak bitişik node’a (düğüme) katılmasını sağlar.

<body onLoad="dugumsayisi()">
<button onclick="dugumekle()">(Düğüm) Ekle</button><button onclick="dugumsayisi()">Normalize Çalıştır</button><br /><br />
<div id="sayialani"> <span>Yeni Düğüm </span> <span>Yeni Düğüm </span> <span>Yeni Düğüm </span> <span>Yeni Düğüm </span> <span>Yeni Düğüm </span> </div>
<script>

function dugumekle(){
	var islembir		=	document.createTextNode("Yeni Düğüm ");
	var sonucbir		=	document.body;
	sonucbir.appendChild(islembir);
	var islembir		=	document.getElementById("sayialani");
	islembir.innerHTML 	=	sonucbir.childNodes.length;
}

function dugumsayisi(){
	document.normalize();
	var islem	        =	document.body;
	var sonuc	        =	document.getElementById("sayialani");
	sonuc.innerHTML 	=	islem.childNodes.length;
}

</script>
</body>

Cookie

Cookie’lerin (çerezlerin) yapısı :
1. Cookie (çerez) adı
2. Cookie (çerez) değeri
3. Cookie’nin (çerezin) yaşam süresi
4. Path (yol)

Cookie (çerez) adı = Cookie (çerez) değeri ; Cookie’nin (çerezin) yaşam süresi ; Path (yol)

<body>
<div id="sonuc"></div>

<script>

var zaman			=	new Date();
zaman.setMonth(zaman.getMonth() + 1);

var cerezadi			=	"isimsoyisim";
var cerezdegeri			=	"Enes Çetinkaya";

document.cookie 		=	cerezadi + "=" + cerezdegeri + ";expires=" + zaman.toGMTString() + ";path=/";

var cerezler			=	document.cookie;
document.getElementById("sonuc").innerHTML = unescape(cerezler);

</script>
</body>

length

Belge içerisindeki HTML elemanına eklenmiş olan özelliklerini sayısını elde etmek için kullanılır.

<body>
<button id="birincitag" name="birinciisim" class="" onclick="ornek()">Buton</button>
<br /><br />
<div id="sonucalani"></div>
<script>

function ornek(){
	var islem	=	document.getElementById("birincitag").attributes.length;
	document.getElementById("sonucalani").innerHTML = islem;
}
</script>
</body>

name

Belge içerisindeki HTML elemanına eklenmiş olan özellik adı referansını elde etmek için kullanılır. HTML elemanının içerisindeki özellik sayısı birden fazla ise her bir özellik adı referansı döngü ile elde edilebilir.

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.deneme{ font-size:25px; color:#FFFFFF; }
</style>
</head>

<body>
<div id="birincikimlik" name="birinciisim" style="background-color:#FF0004" class="deneme" dir="ltr">Enes Çetinkaya</div><br />
<div id="sonucalani"></div>
<script>

var islem	=	document.getElementById("birincikimlik").attributes;
var adet	=	islem.length;
var dizi	=	[];
for(var baslangic = 0; baslangic<adet; baslangic++){
	var sonuc	=	document.getElementById("birincikimlik").attributes[baslangic].name;
	dizi[baslangic] 	=	sonuc;
}

document.getElementById("sonucalani").innerHTML = dizi;

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

value

Belge içerisindeki HTML elemanına eklenmiş olan özellik değerinin referansını elde etmek için kullanılır. HTML elemanı içerisindeki özellik sayısı birden fazla ise her bir özellik değeri referansı döngü ile elde edilebilir.

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.deneme{ background-color:#FFFD00; }
</style>
</head>

<body>
<div id="birincikimlik" name="birinciisim" style="border:1px solid red; margin:5px; padding:5px;" class="deneme">Codernsoft Yazılım Danışmanlık</div> 
<div id="sonucalani"></div>
<script>

var deger		=	document.getElementById("birincikimlik").attributes;
var adet		=	deger.length;
var metin		=	"";
var baslangic	=	0;
while(baslangic<adet){
	var sonuc	=	deger[baslangic].value;
	metin		+=	sonuc + "<br />";
	baslangic++;
}

document.getElementById("sonucalani").innerHTML = metin;

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

specified

Belge içerisindeki HTML elemanına herhangi bir özelliğin eklenip eklenmediği referansını boolean (mantıksal) veri türünde elde etmek için kullanılır.

<body>
<div id="deneme" name="">Codernsoft Yazılım Danışmanlık</div>
<div id="sonucalani"></div>
<script>

var islem	=	document.getElementsByTagName("DIV")[0];
var sonuc	=	islem.getAttributeNode("name").specified;
document.getElementById("sonucalani").innerHTML = sonuc;

</script>
</body>