JavaScript – DOM Metodları-7

0
15

id

Belge içerisindeki herhangi bir HTML elemanının id değerini elde etmek veya ayarlamak için kullanılır.

<body>
<div id="bir">Javascript Eğitim Seti</div>
<div id="sonuca"></div>
<div id="sonucb"></div>

<script>

var islemyap	=	document.getElementsByTagName("DIV")[0].id;
document.getElementById("sonuca").innerHTML = "İlk ID Değeri : " + islemyap;
var degistir	=	document.getElementsByTagName("DIV")[0].id = "iki";
document.getElementById("sonucb").innerHTML = "Son ID Değeri : " + degistir;

</script>
</body>

title

Belge içerisindeki herhangi bir HTML elemanının title değerini elde etmek veya ayarlamak için kullanılır.

<body>
<div id="ornek" title="Enes Çetinkaya">Javascript Eğitim Seti</div>
<div id="degerbir"></div>
<div id="degeriki"></div>

<script>

var islembir	=	document.getElementById("ornek").title;
document.getElementById("degerbir").innerHTML = "HTML elemanının title değeri : " + islembir;

var islemiki	=	document.getElementById("ornek").title = "Uğur Kabak";
document.getElementById("degeriki").innerHTML = "HTML elemanının title değeri : " + islemiki;

</script>
</body>

lang

Belge içerisindeki herhangi bir HTML elemanının lang değerini elde etmek veya ayarlamak için kullanılır.

<body>
<div id="aaa" lang="de">Javascript Eğitim Seti</div>
<div id="sonucbir"></div>
<div id="sonuciki"></div>

<script>

var islembir	=	document.getElementById("aaa").lang;
document.getElementById("sonucbir").innerHTML = "HTML elemanının ilk lang değeri : " + islembir;

var islemiki	=	document.getElementById("aaa").lang = "tr";
document.getElementById("sonuciki").innerHTML = "HTML elemanının son (güncel) lang değeri : " + islemiki;

</script>
</body>

tabIndex

Belge içerisindeki herhangi bir HTML elemanının tabindex değerini elde etmek veya ayarlamak için kullanılır.

<body>
<div id="bir"><span id="sonucbir"></span> Javascript</div>
<div id="iki"><span id="sonuciki"></span> HTML</div>

<script>
	
var degerbir	=	document.getElementById("bir").tabIndex = 1;
document.getElementById("sonucbir").innerHTML = "(" + degerbir + ")";

var degeriki	=	document.getElementById("iki").tabIndex = 2;
document.getElementById("sonuciki").innerHTML = "(" + degeriki + ")";

</script>
</body>

contentEditable

Belge içerisindeki herhangi bir HTML elemanının contenteditable değerini elde etmek veya ayarlamak için kullanılır.

<body>
<div id="bir" contenteditable="true">Javascript Eğitim Seti</div>
<div id="sonuc"></div>

<script>

var deger	=	document.getElementById("bir").contentEditable = "false";
document.getElementById("sonuc").innerHTML = deger;

</script>
</body>

isContentEditable

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

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

<script>

var sonuc	=	document.getElementById("kimlik").isContentEditable;
if(sonuc==true){
	document.getElementById("sonuc").innerHTML	=	"İlgili HTML elemanının düzenlenebilirlik özelliği vardır.";
}else{
	document.getElementById("sonuc").innerHTML	=	"İlgili HTML elemanının düzenlenebilirlik özelliği yoktur.";
}

</script>
</body>

className

Belge içerisindeki herhangi bir HTML elemanının class adını elde etmek veya ayarlamak için kullanılır.

<style>
.bir{
	background-color:yellow;
	border:4px double black;
	width:300px;
	height:23px;
	color:blue;
	text-align:center;
	font-weight:bold;
	padding-top:3px;
}
</style>
</head>

<body>
<button onclick="ornek()">Tıklayınız</button><br /><br />
<div id="alan">Javascript Eğitim Seti</div>

<script>

function ornek(){
	document.getElementById("alan").className = "bir";
}

</script>
</body>

nodeType

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

1 ELEMENT_NODE (Eleman Düğümü)
2 ATTRIBUTE_NODE (Özellik Düğümü)
3 TEXT_NODE (Metin Düğümü)
4 CDATA_SECTION_NODE (CDATA Kesit Düğümü)
5 ENTITY_REFERANCE_NODE (Varlık Referansı Düğümü)
6 ENTITY_NODE (Varlık Düğümü)
7 PROCESSING_INSRUCTION_NODE (İşlem Yönergesi Düğümü)
8 COMMENT_NODE (Açıklama Düğümü)
9 DOCUMENT_NODE (Döküman / Belge Düğümü)
10 DOCUMENT_TYPE_NODE (Döküman / Belge Türü Düğümü)
11 DOCUMENT_FARGMENT_NODE (Döküman / Belge Parçası / Bölümü Düğümü)
12 NOTATION_NODE (Gösterim Düğümü)

<style>
.ornek{
	font-weight:bold;	
}
</style>
</head>

<body>
<button onclick="deneme()">Tıklayınız</button>
<div id="OrnekBir">Enes Çetinkaya <span class="ornek">Javascript</span> Eğitim Seti</div> <!-- HTML Açıklama Alanı -->
<br /><br />
<div id="sonuc"></div>

<script>

function deneme(){
	var islem		=	document.body.childNodes;
	var metin		=	"";
	var baslangic;
	for(baslangic = 0; baslangic<islem.length; baslangic++){
		metin	=	metin + islem[baslangic].nodeType + "<br />";
	}
	document.getElementById("sonuc").innerHTML = metin;
}

</script>
</body>

nodeName

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

<body> <!-- Deneme İçin Gizli Açıklama (HTML) -->
<p id="deneme">Javascript Eğitim Seti</p><br />
<button onclick="ornek()">Tıklayınız</button>
<br /><br />
<div id="sonuc"></div>

<script>

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

</script>
</body>

nodeValue

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

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

<script>

function ornek(){
	var deger		=	document.getElementById("kimlik");
	var tur			=	deger.childNodes[1].nodeType;
	var isim		=	deger.childNodes[1].nodeName;
	var icerik		=	deger.childNodes[1].nodeValue;

	var birlestir	=	"Düğümün Türü : " + tur + "<br />Düğümün İsmi : " + isim + "<br />Düğümün İçeriği : " + icerik;
	document.getElementById("sonuc").innerHTML = birlestir;
}

</script>
</body>