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 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这样的库可以更容易地以更具声明性的方式编写。

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

3 个答案: