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>