JavaScript – DOM Metodları-6

0
9

getNamedItem()

Belge içerisindeki HTML elemanına eklenmiş olan özellik node’u (düğümü) referansını elde etmek için kullanılır.

<body>
<div id="ornek" name="test" style="border:1px dotted red;">Codernsoft Yazılım Danışmanlık</div>

<script>

var islem	=	document.getElementsByTagName("DIV")[0];
var sonuc	=	islem.attributes.getNamedItem("style").value;
alert(sonuc);

</script>
</body>

setNamedItem()

Belge içerisindeki HTML elemanına özellik node’u (düğüme) ve değeri eklemek için kullanılır.

<body>
<div>Volkan Alakent</div>

<script>

var islem	=	document.getElementsByTagName("DIV")[0];
var ekle	=	document.createAttribute("dir");
ekle.value 	=	"rtl";
islem.attributes.setNamedItem(ekle);

</script>
</body>

removeNamedItem()

Belge içerisindeki HTML elemanına eklenmiş olan özellik node’unu (düğümünü) kaldırmak için kullanılır.

<body>
<div style="background-color:yellow">Javascript</div>

<script>

var islem	=	document.getElementsByTagName("DIV")[0];
islem.attributes.removeNamedItem("style");

</script>
</body>

item()

Belge içerisindeki HTML elemanına eklenmiş olan özellik node’u (düğümü) referansını elde etmek veya ayarlamak için kullanılır. HTML elemanı içerisindeki özellik sayısı birden fazla ise her bir özellik node’ (düğümü) referansı döngü ile elde edilebilir.

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Extra Eğitim</title>
<style>
.ornek{ color:red; border:1px solid red; background-color:yellow; }
.demo{ color:white; border:1px solid blue; background-color:green; }
</style>
</head>

<body>
<p id="kimlik" name="isim" class="ornek">Volkan Alakent Javascript Eğitim Seti</p>
<div id="sonucalani"></div>

<script>

var islem	=	document.getElementById("kimlik");
var adet	=	document.getElementById("kimlik").attributes.length;
var metin	=	"";
for(var baslangic = 0; baslangic<adet; baslangic++){
	var sonucadi	=	islem.attributes.item(baslangic).name;
	var sonucdegeri	=	islem.attributes.item(baslangic).value;
	var sonucmetni	=	sonucadi + " : " + sonucdegeri + ", ";
	metin	+=	sonucmetni;
}

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

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

style

Belge içerisindeki HTML elemanına veya elemanlarına CSS (Cascading Style Sheets) (Basamaklı stil şablonları) özellikleri ve değerleri eklemek veya referansını elde etmek için kullanılır.

<body>
<div id="kimlikbir" name="isimbir">Javascript Eğitim Seti</div>
<div id="kimlikiki" name="isimiki">Css Eğitim Seti</div>
<div id="kimlikuc" name="isimuc">Php Eğitim Seti</div>

<script>

document.getElementById("kimlikiki").style.backgroundColor = "red";
document.getElementById("kimlikiki").style.color = "white";
document.getElementById("kimlikiki").style.border = "5px double blue";
document.getElementById("kimlikiki").style.padding = "5px";

</script>
</body>

accessKey

Belge içerisindeki herhangi bir HTML elemanına atanmış olan accessKey değerini elde etmek veya ayarlamak için kullanılır.

<body>
<a id="baglantibir" href="https://www.google.com.tr" target="_blank">Google'a Git</a> <span id="bir"></span><br />
<a id="baglantiiki" href="https://www.yandex.com.tr" target="_blank">Yandex'e Git</a> <span id="iki"></span>

<script>

var degerbir	=	document.getElementById("baglantibir").accessKey = "g";
var degeriki	=	document.getElementById("baglantiiki").accessKey = "y";

document.getElementById("bir").innerHTML = "Kısayol Tuşu : " + degerbir;
document.getElementById("iki").innerHTML = "Kısayol Tuşu : " + degeriki;

</script>
</body>

focus()

Belge içerisindeki herhangi bir HTML elemanına odaklanmak için kullanılır.

<body>
<button onclick="ornek()">Odaklan</button><br /><br />
<div id="baglanti" contenteditable="true">Javascript Eğitim Seti</div>

<script>

function ornek(){
	document.getElementById("baglanti").focus();
}

</script>
</body>

blur()

Belge içerisinde odaklanılmış herhangi bir HTML elemanının odağından çıkmak için kullanılır.

<body>
<button onclick="bir()">Odaklan</button>
<button onclick="iki()">Odaktan Çık</button><br /><br />
<div id="baglanti" contenteditable="true">Volkan Alakent Javascript Eğitim Seti</div>

<script>

function bir(){
	document.getElementById("baglanti").focus();
}

function iki(){
	document.getElementById("baglanti").blur();
}

</script>
</body>

classList

Belge içerisindeki herhangi bir HTML elemanına atanmış olan class listesi isimlerini elde etmek veya ayarlamak için kullanılır.

item : Sınıf seçicisinin adını döndürür.
length : Sınıf seçicisinin sayısını döndürür.
add : Sınıf seçicisi ekler.
remove : Sınıf seçicisi kaldırır / siler.
toggle : Sınıf seçicisi ekler veya kaldırır.
contains : Sınıf seçicisi arar.

<body>
<button onclick="ornek()">İşlem Yap</button>
<br /><br />
<div id="alan" class="bir iki uc">Javascript Eğitim Seti</div>
<br /><br />
<div id="sonuc"></div>

<script>

function ornek(){
	var deger		=	document.getElementById("alan").classList.contains("dort");
	document.getElementById("sonuc").innerHTML = deger;
}

</script>
</body>

tagName

Belge içerisindeki herhangi bir HTML elemanının tag (etiket) adını elde etmek için kullanılır.

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

<script>

var sonuc	=	document.getElementById("ornek").tagName;
document.getElementById("sonuc").innerHTML = sonuc;

</script>
</body>