JavaScript – DOM Metodları-9

0
13

previousElementSibling

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

<body>
<div>
	<div id="aaa">Javascript</div>
        <p id="bbb">Php</p>
	<div id="ccc">Html</div>
        <p id="ddd">Css</p>
	<div id="eee">Jquery</div>
        <p id="fff">Xml</p>
	<div id="ggg">Python</div>
</div>

<script>

document.getElementById("ddd").previousElementSibling.style.backgroundColor = "grey";
document.getElementById("ddd").previousElementSibling.style.color = "white";

</script>
</body>

previousSibling

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) önce gelen ilk node’u (düğümü) elde etmek için kullanılır.

<body>
<ol><li id="bir">Javascript</li><li id="iki">Css</li><li id="uc">Html</li><li id="dort">Php</li><li id="bes">Xml</li></ol>

<script>

document.getElementById("uc").previousSibling.style.fontWeight = "bold";
document.getElementById("uc").previousSibling.style.color = "blue";

</script>
</body>

offsetParent

Belge içerisindeki herhangi bir HTML elemanının içerisinde mutlak olarak konumlandırıldığı ilk elemanın referans nesnesini elde etmek için kullanılır.

<body>
<div id="deneme"><span id="yazilimdili"><b id="kalinlastir">Java</b>script</span> Eğitim Seti</div>
<br /><br />
<div id="sonucalani"></div>

<script>

var bul	=	document.getElementById("kalinlastir").offsetParent;
document.getElementById("sonucalani").innerHTML = bul;

</script>
</body>

contains()

Belge içerisindeki herhangi bir node’un (düğümün), başka bir node’un (düğümün) alt node’u düğümü olup olmadığını kontrol ederek, boolean (mantıksal) veri türünde sonucu geriye döndürür.

<body>
<div id="alan">
	<p id="bir">Javascript Eğitim Seti</p>
	<p id="iki">Php Eğitim Seti</p>
</div>
<br /><br />
<div id="sonuc"></div>

<script>
	

var kontrol		=	document.getElementById("alan");
var islemyap	        =	document.getElementById("bir").contains(kontrol);
document.getElementById("sonuc").innerHTML = islemyap;

</script>
</body>

textContent

Belge içerisindeki herhangi bir node’un (düğümün), text node’larının (metin düğümlerinin) değerini elde etmek veya ayarlamak için kullanılır.

<body>
<button onclick="ornek()">Tıklayınız</button>
<br /><br />

<ul id="liste">
	<li>Javascript</li>
	<li>Php</li>
	<li>Html</li>
</ul>

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

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

function ornek(){
	var deger	=	document.getElementById("liste").innerHTML;
	document.getElementById("sonuc").innerHTML = deger;
}

</script>
</body>

compareDocumentPosition()

Belge içerisinde bulunan node’ların (düğümlerin) birbilerine göre konum değerlerini elde etmek için kullanılır.

2 : Belirtilen ilk düğüm, belirtilen ikinci düğümden sonra
4 : Belirtilen ilk düğüm, belirtilen ikinci düğümden önce

<body>
<div id="jsdugumu">Javascript</div>
<div id="cssdugumu">Css</div>
<div id="htmldugumu">Html</div>
<div id="phpdugumu">Php</div>
<br /><br />
<div id="sonuc"></div>

<script>

var ilkdugum	=	document.getElementById("cssdugumu");
var ikincidugum	=	document.getElementById("phpdugumu");
var islemyap	=	ilkdugum.compareDocumentPosition(ikincidugum);
document.getElementById("sonuc").innerHTML = islemyap;

</script>
</body>

parentElement

Belge içerisindeki herhangi ibr HTML elemanının bir üst elemanını elde etmek için kullanılır.

<body>

<div>
	<div id="ornekbir">Javascript Eğitim Seti</div>
	<div id="ornekiki">HTML Eğitim Seti</div>
	<div id="ornekuc">CSS Eğitim Seti</div>
	<div id="ornekdort">PHP Eğitim Seti</div>
</div>

<script>

document.getElementById("ornekuc").parentElement.parentElement.style.backgroundColor = "yellow";

</script>
</body>

parentNode

Belge içerisindeki herhangi bir node’un (düğümün) bir üst node’unu (düğümünü) elde etmek için kullanılır.

<body>

<div>
	<div id="ornekbir">Javascript Eğitim Seti</div>
	<div id="ornekiki">Php Eğitim Seti</div>
	<div id="ornekuc">Css Eğitim Seti</div>
	<div id="ornekdort">Xml Eğitim Seti</div>
</div>

<script>

document.getElementById("ornekuc").parentNode.parentNode.style.backgroundColor = "yellow";

</script>
</body>

appendChild()

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

<body>
<button onclick="ornekbir()">Birinci Listeye Ekle</button>
<button onclick="ornekiki()">İkinci Listeye Ekle</button>
<br /><br /><br /><br />
<ul id="bir">
	<li>Javascript</li>
	<li>HTML</li>
	<li>CSS</li>
	<li>PHP</li>
</ul>
<br /><br /><br /><br />
<ul id="iki">
	<li>Photoshop</li>
	<li>Corel</li>
	<li>Paint</li>
	<li>Paint.NET</li>
</ul>

<script>

function ornekbir(){
	var elemanolustur	=	document.createElement("LI");
	var icerikolustur	=	document.createTextNode("XML");
	elemanolustur.appendChild(icerikolustur);
	document.getElementById("bir").appendChild(elemanolustur);
}

function ornekiki(){
	var elemanolustur	=	document.createElement("LI");
	var icerikolustur	=	document.createTextNode("IrfanView");
	elemanolustur.appendChild(icerikolustur);
	document.getElementById("iki").appendChild(elemanolustur);
}

</script>
</body>

removeChild()

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

<body>
<button onclick="ornek()">Sil</button>
<br /><br />
<ol id="liste">
	<li id="bir">Javascript</li>
	<li id="iki">Php</li>
	<li id="uc">Xml</li>
	<li id="dort">Css</li>
	<li id="bes">Html</li>
</ol>

<script>

function ornek(){
	var islem	=	document.getElementById("liste");
	islem.removeChild(islem.childNodes[5]);
}

</script>
</body>