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 这样的库来保持理智的一个很好的论据。