JavaScript – DOM Metodları-8

By
Enes Çetinkaya
-
0
24

childElementCount

Belge içerisindeki herhangi bir HTML elemanının içerdiği alt elemanlarının sayısını elde etmek için kullanılır.

<body>
<button onclick="ornek()">Tıklayınız</button><br /><br />
<div id="kimlik"><span>Javascript Eğitim Seti</span> <span>Enes Çetinkaya</span></div><br />
<div id="sonuc"></div>

<script>

function ornek(){
	var islemyap	=	document.getElementById("kimlik").childElementCount;
	document.getElementById("sonuc").innerHTML = "İlgili HTML elemanın içerisinde " + islemyap + " adet alt eleman var";
}

</script>
</body>

hasChildNodes()

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

<body>
<button onclick="ornek()">Tıklayınız</button><br /><br />
<div id="bir"></div>
<div id="iki"><div></div></div>
<div id="uc">Enes Çetinkaya</div>
<div id="dort"><div>Javascript Eğitim Seti</div></div>
<br /><br />
<div id="sonucbir"></div>
<div id="sonuciki"></div>
<div id="sonucuc"></div>
<div id="sonucdort"></div>


<script type="text/javascript" language="javascript">

function ornek(){
	var kontrolbir	=	document.getElementById("bir").hasChildNodes();
	if(kontrolbir==true){
		document.getElementById("sonucbir").innerHTML = "HTML elemanının alt node'u (düğümü) vardır."
	}else{
		document.getElementById("sonucbir").innerHTML = "HTML elemanının alt node'u (düğümü) yoktur."
	}
	
	var kontroliki	=	document.getElementById("iki").hasChildNodes();
	if(kontroliki==true){
		document.getElementById("sonuciki").innerHTML = "HTML elemanının alt node'u (düğümü) vardır."
	}else{
		document.getElementById("sonuciki").innerHTML = "HTML elemanının alt node'u (düğümü) yoktur."
	}
	
	var kontroluc	=	document.getElementById("uc").hasChildNodes();
	if(kontroluc==true){
		document.getElementById("sonucuc").innerHTML = "HTML elemanının alt node'u (düğümü) vardır."
	}else{
		document.getElementById("sonucuc").innerHTML = "HTML elemanının alt node'u (düğümü) yoktur."
	}
	
	var kontroldort	=	document.getElementById("dort").hasChildNodes();
	if(kontroldort==true){
		document.getElementById("sonucdort").innerHTML = "HTML elemanının alt node'u (düğümü) vardır."
	}else{
		document.getElementById("sonucdort").innerHTML = "HTML elemanının alt node'u (düğümü) yoktur."
	}
}

</script>
</body>

children

Belge içerisindeki herhangi bir HTML elemanının içerdiği alt elemanları elde etmek için kullanılır.

<body>
<div id="alanimiz">
	<div>Javascript</div>
	<div>Php</div>
	<div>Css</div>
	<div>Html</div>
	<div>JQuery</div>
</div>

<script>

document.getElementById("alanimiz").children[2].style.color = "red";

</script>
</body>

childNodes

Belge içerisindeki herhangi bir HTML elemanının içerdiği alt node’ları (düğümleri) elde etmek için kullanılır.

<body>

<div id="alanimiz">
	<div>Javascript</div>
	<div>Java</div>
	<div>Html</div>
	<div>Css</div>
	<div>Php</div>
</div>
<br /><br />
<div id="sonuc"></div>

<script>

var islemyap	=	document.getElementById("alanimiz").childNodes;
var uzunluk		=	islemyap.length;
var metin		=	"";
for(var baslangic = 0; baslangic<uzunluk; baslangic++){
	metin	=	metin + islemyap[baslangic].nodeName + "<br />";
}

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

</script>
</body>

firstElementChild

Belge içerisindeki herhangi bir HTML elemanının içerdiği ilk elemanı elde etmek için kullanılır.

<body>
<div id="alan">
	<p>Enes Çetinkaya</p>
	<p>Javascript Eğitim Seti</p>
</div>
<div id="sonuc"></div>

<script>

var deger	=	document.getElementById("alan").firstElementChild.innerHTML;
document.getElementById("sonuc").innerHTML = deger;

</script>
</body>

firstChild

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

<body>
<ul id="alan"><li>Enes Çetinkaya</li>
	<li>Javascript Eğitim Seti</li>
</ul>
<div id="sonuc"></div>

<script>

var deger	=	document.getElementById("alan").firstChild.innerHTML;
document.getElementById("sonuc").innerHTML = deger;

</script>
</body>

lastElementChild

Belge içerisindeki herhangi bir HTML elemanının içerdiği son elemanı elde etmek için kullanılır.

<body>
<div id="alan">
	<div>Javascript</div>
	<div>Css</div>
	<div>Html</div>
	<div>Php</div>
	<div>Python</div>
</div><br />

<script>

document.getElementById("alan").lastElementChild.style.color = "blue";

</script>
</body>

lastChild

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

<body>
<div id="kimlik"><div>Enes Çetinkaya</div><div>Javascript</div><div>Eğitim Seti</div></div><br />
<div id="sonuc"></div>

<script>

var deger	=	document.getElementById("kimlik").lastChild.innerHTML;
document.getElementById("sonuc").innerHTML = deger;

</script>
</body>

nextElementSibling

Belge içerisindeki herhangi bir HTML elemanının içerisindeki aynı seviyede yani kardeş olan elemanlardan, belirtilecek olan elemandan sonra gelen ilk elemanı elde etmek için kullanılır.

<body>
<div>
<p id="bir">Javascript</p>
<div id="iki">PHP</div>
<p id="uc">HTML</p>
<div id="dort">JQuery</div>
<p id="bes">CSS</p>
</div><br /><br /><br />
<div id="sonuc"></div>


<script>

var deger	=	document.getElementById("uc").nextElementSibling.id;
document.getElementById("sonuc").innerHTML = deger;

</script>
</body>

nextSibling

Belge içerisindeki herhangi bir HTML elemanının içerisindeki aynı seviyede yani kardeş olan node’lardan (düğümlerden), belirtilecek olan node’dan (düğümden) sonra gelen ilk node’u (düğümü) elde etmek için kullanılır.

<body>
<div><p id="birincieleman">Javascript</p><div id="ikincieleman">PHP</div><p id="ucuncueleman">CSS</p><div id="dorduncueleman">HTML</div><p id="besincieleman">JQuery</p><div id="altincieleman">XML</div></div>

<script>

document.getElementById("ucuncueleman").nextSibling.style.color = "red";

</script>
</body>

İLGİLİ İÇERİKLERYAZARIN DİĞER İÇERİKLERİ