javascript - 在 javascript 中访问子节点的子节点

Question

如何在javascript中访问子节点的子节点？我需要定位每个 li 内部的 img 并获取它的宽度和高度。我想在不使用 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 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 这样的库使这更容易以更具声明性的方式编写。

Answer 3

您可以为$()函数提供第二个参数以指定搜索图像的范围：

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