JavaScript – DOM Metodları-10

0
19

replaceChild()

Belge içerisindeki herhangi bir HTML elemanının içerdiği node’u (düğümü) değiştirmek için kullanılır.

<body>
<button onclick="ornek()">Değiştir</button>
<br /><br />
<ul id="liste">
	<li id="bir">Php</li>
	<li id="iki">Html</li>
	<li id="uc">Css</li>
	<li id="dort">Xml</li>
</ul>

<script>

function ornek(){
	var yenidugum	=	document.createTextNode("Javascript");
	var deger	=	document.getElementById("liste").childNodes[3];
	deger.replaceChild(yenidugum, deger.childNodes[0]);
}

</script>
</body>

cloneNode()

Belge içerisindeki herhangi bir HTML elemanının içerdiği node’u (düğümü) kopyalamak için kullanılır.

<body>
<ul id="listebir">
	<li id="abir">Javascript</li>
	<li id="aiki">Php</li>
	<li id="auc">Css</li>
</ul>
<br /><br />
<ul id="listeiki">
	<li id="bbir">Photoshop</li>
	<li id="biki">Corel</li>
	<li id="buc">Paint</li>
</ul>
<br /><br />
<button onclick="ornek()">Kopyala</button>


<script>

function ornek(){
	var kopyalanacakdugum	=	document.getElementById("listebir").childNodes[1];
	var kopyala		=	kopyalanacakdugum.cloneNode(true);
	document.getElementById("listeiki").appendChild(kopyala);
}

</script>
</body>

insertBefore()

Bir node’u (düğümü) belge içerisndeki belirtilecek olan herhangi bir node’un (düğümün) önüne eklemek için kullanılır.

<body>
<button onclick="ornek()">Ekle</button>
<br /><br />
<ul id="liste">
	<li>Javascript</li>
	<li>Php</li>
	<li>Css</li>
</ul>

<script>

function ornek(){
	var yenieleman	=	document.createElement("LI");
	var yeniyazi	=	document.createTextNode("Html");
	yenieleman.appendChild(yeniyazi);
	
	var deger	=	document.getElementById("liste");
	var yer		=	deger.childNodes[0];
	deger.insertBefore(yenieleman, yer);
}

</script>
</body>

hasAttribute()

Belge içerisindeki herhangi bir HTML elemanının belirtilen özelliğe sahip olup olmadığını kontrol ederek, boolean (mantıksal) veri türünde sonucu geriye döndürür.

<body>
<div id="ornek">Javascript Eğitim Seti</div>
<br /><br />
<div id="sonucalani"></div>

<script>

var kontrolet	=	document.getElementById("ornek").hasAttribute("name");
document.getElementById("sonucalani").innerHTML = kontrolet;

</script>
</body>

hasAttributes()

Belge içerisindeki herhangi bir HTML elemanının herhangi bir özelliğe sahip olup olmadığını kontrol ederek, boolean (mantıksal) veri türünde sonucu geriye döndürür.

<body>
<div>Javascript Eğitim Seti</div>
<br /><br />
<div id="sonucalani"></div>

<script>

var kontrol	=	document.getElementsByTagName("DIV")[0].hasAttributes();
document.getElementById("sonucalani").innerHTML = kontrol;

</script>
</body>

getAttribute()

Belge içerisindeki herhangi bir HTML elemanının belirtilen özelliğinin değerini elde etmek için kullanılır.

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Extra Eğitim</title>
<style>
.orneksinif{
	color:red;
}
</style>
</head>

<body>
<div id="ornek" name="deneme" style="font-weight:bold; font-size:25px;" class="orneksinif" contenteditable="true">Javascript Eğitim Seti</div>
<br /><br />
<div id="sonucbir"></div>
<div id="sonuciki"></div>
<div id="sonucuc"></div>
<div id="sonucdort"></div>
<div id="sonucbes"></div>

<script>

var birincideger	=	document.getElementsByTagName("DIV")[0].getAttribute("id");
var ikincideger		=	document.getElementsByTagName("DIV")[0].getAttribute("name");
var ucuncudeger		=	document.getElementsByTagName("DIV")[0].getAttribute("style");
var dorduncudeger	=	document.getElementsByTagName("DIV")[0].getAttribute("class");
var besincideger	=	document.getElementsByTagName("DIV")[0].getAttribute("contenteditable");

document.getElementById("sonucbir").innerHTML = "id değeri : " + birincideger;
document.getElementById("sonuciki").innerHTML = "name değeri : " + ikincideger;
document.getElementById("sonucuc").innerHTML = "style değeri : " + ucuncudeger;
document.getElementById("sonucdort").innerHTML = "class değeri : " + dorduncudeger;
document.getElementById("sonucbes").innerHTML = "contenteditable değeri : " + besincideger;

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

getAttributeNode()

Belge içerisindeki herhangi bir HTML elemanının belirtilen özellik node’unun (düğümünün) değerini elde etmek veya ayarlamak için kullanılır.

<body>
<div id="ornek" name="isim" contenteditable="true" style="font-size:25px;">Volkan Alakent Javascript Eğitim Seti</div>
<br /><br />
<div id="sonuc"></div>

<script>

var degerbul	=	document.getElementById("ornek").getAttributeNode("style");
document.getElementById("sonuc").innerHTML = degerbul;

</script>
</body>

setAttribute()

Belge içerisindeki herhangi bir HTML elemanına belirtilen özelliği ve değerini eklemek için kullanılır.

<body>
<button onclick="ornek()">Ekle</button>
<br /><br />
<a id="baglanti" target="_blank">Bağlantıya Git</a>

<script>

function ornek(){
	document.getElementById("baglanti").setAttribute("href", "https://www.google.com.tr");
}

</script>
</body>

setAttributeNode()

Belge içerisindeki herhangi bir HTML elemanına createAttribute() metodu ile oluşturulan özellik node’unu (düğümünü) ve değerini, node object’ine (düğüm nesnesine) uygulamak için kullanılır.

<body>
<button onclick="ornek()">Tıklayınız</button>
<br /><br />
<a id="baglanti" target="_blank">Bağlantıya Git</a>

<script>

function ornek(){
	var baglan		=	document.getElementById("baglanti");
	var eklenecekozellik	=	document.createAttribute("href");
	eklenecekozellik.value 	=	"https://www.google.com.tr";
	baglan.setAttributeNode(eklenecekozellik);
}

</script>
</body>

removeAttribute()

Belge içerisindeki herhangi bir HTML elemanının belirtilen özelliğini kaldırmak / silmek için kullanılır.

<body>
<button onclick="ornek()">İşlem Yap</button>
<br /><br />
<a id="ornek" href="https://www.google.com.tr" target="_blank">Google</a>

<script>

function ornek(){
	document.getElementById("ornek").removeAttribute("href");
	document.getElementById("ornek").removeAttribute("target");
}

</script>
</body>