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.