在javascript中訪問childnodes的子節點

如何訪問javascript中的子節點的子節點？我需要定位每個li的img並獲取它的寬度和高度。我想這樣做，而不使用jQuery。只是純粹的JavaScript。在javascript中訪問childnodes的子節點

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


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

來源

2013-03-19 Athapali

如果可以保證它可用（例如，如果您正在爲移動瀏覽器設計網站），那麼執行此操作的理想方法是使用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庫，以優良的說法保持你的理智。

來源

2013-03-19 18:38:47 lonesomeday

您可以提供第二個參數$()功能來指定一個範圍，其中搜索圖像：

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

來源

2013-03-19 18:31:33 Yogu

你會如何做與JavaScript類似的東西？ – Athapali 2013-03-19 18:33:25

這個工作對我來說：

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這樣的庫可以更容易以更具說明性的方式編寫。

來源

2013-03-19 18:38:20

在javascript中訪問childnodes的子節點

回答

相關問題