HTML DOM Erişim Düğümleri

Yeni Üyelik

Haber bülteni üyeliği

Ziyaret Bilgileri


[ Per, 21 Kas 2024 ] Toplam 12 ziyaret 11 benzersiz ziyaretçi

htmldom » HTML DOM Erişim Düğümleri

HTML DOM Erişim Düğümleri

DOM kullanarak bir HTML dokümanındaki her düğüme erişebilirsiniz. Bunun için üç yöntemi kullanabilirsiniz;

getElementById() yöntemini kullanabilirsiniz.
getElementsByTagName() yöntemini kullanabilirsiniz.
Düğüm ağacında gezinebilir ve düğüm ilişkilerini kullanabilirsiniz.

getElementById() Yöntemi

Belirli bir kimlikteki (id) düğüme erişim sağlayan yöntemdir;

Dizin

metin = document.getElementById("giris")

Örnek

<html>

<body>

<p id="giris">DOM'lar cok kullanislilar</p>

<p id="gelisme">Bu ornekte <b id="bold">getElementById</b> yontemi kullanildi</p>

metin1=document.getElementById("giris").childNodes[0].nodeValue;

metin2=document.getElementById("gelisme").childNodes[0].nodeValue;

metin2+=document.getElementById("bold").childNodes[0].nodeValue;

metin2+=document.getElementById("gelisme").childNodes[2].nodeValue;

document.write("Bu metinleri JavaScript HTML DOM araciligi ile yazdirdi; <br /> <br />"+ metin1+"<br />"+metin2);

</script>

</body>

</html>

getElementsByTagName() yöntemi

getElementsByTagName() yöntemi tanımlanan isimdeki tüm elemanlara erişim sağlar

Dizin

metin = document.getElementByTagName("p");

Örnek

<html>

<body>

<p>Bu birinci paragraf</p>

<p>Bu ikinci paragraf</p>

<p>Bu ucuncu paragraf</p>

metin = document.getElementsByTagName("p");

document.write("<b>JavaScript ve DOM kullanilarak yeniden yazdirilanlar:</b> <br />

<br />"+metin[0].innerHTML+"<br />"+metin[1].innerHTML+"<br />"+metin[2].innerHTML);

</script>

</body>

</html>

Örnek 2

<html>

<body>

<p>Bu birinci paragraf</p>

</div>

<p>Bu ikinci paragraf</p>

<p>Bu ucuncu paragraf</p>

</div>

metin = document.getElementById("gelisme").getElementsByTagName("p");

document.write("<b>JavaScript ve DOM kullanilarak yeniden yazdirilanlar:</b> <br /><br />"+metin[0].innerHTML+"<br />"+metin[1].innerHTML);

</script>

</body>

</html>

DOM Düğüm Listeleri

Yukarıdaki örnekler de gördüğünüz gibi getElementsByTagName() metodunun sonucu bir dizi olmakta. DOM düğümleri length özelliği ile düğüm listelerini yazdırmak için örneklerde olduğu gibi hepsini teker teker yazmak zorunda değiliz.

Örnek

<html>

<body>

<p>Bu birinci paragraf</p>

</div>

<p>Bu ikinci paragraf</p>

<p>Bu ucuncu paragraf</p>

</div>

metin = document.getElementById("gelisme").getElementsByTagName("p");

document.write("<b>JavaScript ve DOM kullanilarak yeniden yazdirilanlar:</b> <br /><br />")

for (i=0;i<metin.length;i++)

{

document.write(metin[i].innerHTML+"<br />");

}

</script>

</body>

</html>

Yorumlar (2)

faydalı bilgiler için teşekkürler.

Mahmut tarafından | Per, 25 Haz 2015 11:41:19 tarihinde yazıldı.

Teşekkürler

sinan tarafından | Pzt, 22 Ara 2014 22:29:40 tarihinde yazıldı.

Editör Bilgileri

Mehmet Emrah Konya

Zibidi

Editöre Ulaşın

En Son Eklenenler


x-isini-pulsari yaz-ucgeni yerel-kabarcik yildizlar-arasi-yolculuk zhai-zhigang avusturya-uzay-ajansi birlesik-krallik-uzay-ajansi