Доступ к дочерним детским детям в javascript

Question

Как получить доступ к дочерним узлам дочернего узла в javascript? Мне нужно нацелить img внутри каждого li и получить его ширину и высоту. Я хочу сделать это без использования jquery. Просто чистый javascript.

<ul id="imagesUL"> 
<li> 
    <h3>title</h3> 
    <img src="someURL" /> 
</li> 
</ul> 


var lis = document.getElementById("imagesUL").childNodes; 

Answer 1

Идеальный способ сделать это с помощью функции querySelectorAll, если вы можете гарантировать, что она будет доступна (например, если вы разрабатываете сайт для мобильных браузеров).

var imgs = document.querySelectorAll('#imagesUL li img'); 

Если вы не можете гарантировать, что, однако, вы должны будете сделать петлю самостоятельно:

var = lis = document.getElementById("imagesUL").childNodes, 
     imgs = [], 
     i, j; 

for (i = 0; i < lis.length; i++) { 
    for (j = 0; j < lis[i].childNodes.length; j++) { 
     if (lis[i].childNodes[j].nodeName.toLowerCase() === 'img') { 
      imgs.push(lis[i].childNodes[j]); 
     } 
    } 
} 

выше фрагмент кода является отличным аргументом для использования библиотеки как JQuery для сохраните свое здравомыслие.

Answer 2

Вы можете предоставить второй параметр функции $(), чтобы определить область, в которой для поиска изображений:

var lis = $('#imagesUL').children(); 
var images = $('img', lis) 
images.each(function() { 
    var width = $(this).attr('width'); 
    // ... 
}); 

Answer 3

Это работает для меня:

var children = document.getElementById('imagesUL').children; 
var grandChildren = []; 
for (var i = 0; i < children.length; i++) 
{ 
    var child = children[i]; 
    for (var c = 0; c < child.children.length; c++) 
     grandChildren.push(child.children[c]); 
} 

grandChildren содержит детей всех детей.

Библиотеки, такие как jQuery и UnderscoreJS, упрощают запись в более декларативном виде.