Javascript : Div içerisindeki elemanlara ulaşmak

Div içerisinde yer alan elemanlara ulaşmak oldukça kolay bir işlemdir. Bu makalede div içerisindeki elemalara ulaşıp bir dizi içerisine atayacağız. Başlayalım :

İlk olarak divimizi çağırıyoruz :



var div = document.getElementById('pr_content');

Daha sonra div içerisindeki tagımızı çağırıyoruz. Ben bu senaryoda image çağıracağım siz isterseniz span gibi taglarıda çağırabilirsiniz.


 var divs = div.getElementsByTagName('img');

Daha sonra boş bir dizi oluşturuyoruz :


var divArray = new Array(); 

For döngüsüyle div içerisinde dönerek her bir elemana sırayla erişiyoruz. Daha sonra dizi içerine kaydediyoruz.


for (var i = 0; i < divs.length; i += 1) {

     divArray.push(divs[i].src); // image kaynağını aldık.

}


 

Div içerisindeki tüm resimlere erişip dizi içerisine atamış olduk.

Kodların  son hali :


Html  :

<input type=”button” value=”Çağır” onclick=”elemancagir();” />
<input type=”text” id=”area” style=”height:150px; width:350px” />

<div id=”pr_content”>
<img src=”http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/beautiful-cat-hd-wallpapers-fullscreen-top-images.jpg” style=”visibility:hidden” />

</div>


 

JS :

function elemancagir() {
var div = document.getElementById(‘pr_content’);
var divs = div.getElementsByTagName(‘img’);
var divArray = new Array();
for (var i = 0; i < divs.length; i += 1) {

divArray.push(divs[i].src + “<br>”);
}
document.getElementById(‘area’).value = divArray;
};


Kolay Gelsin.


					

Muavenet

Web teknolojilerine merak salmış bir bilgisayar mühendisinin yazıları

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir