在JavaScript中，如何訪問子節點的屬性？

Question

我建立在CasperJS鏈接刮板，其主要的功能看起來非常像這樣：

function findLinks() { 
    return Array.prototype.map.call(document.querySelectorAll('a'), function(e){ 
     return { 
       href: e.href, 
       title: e.title, 
       rel: e.rel, 
       anchor: e.text, 
       innerHTML: e.innerHTML 
       }; 
    }); 
} 

不過，我想修改findLinks()的方式，如果我的鏈接刮板發現這樣的事情：

<a href="#" title="anchor tag" rel="nofollow"><img src="myimage.jpg" alt="beautiful image" /></a>

我可以訪問單獨<img>屬性，就像我的鏈接做到這一點。

我一直在讀的Mozilla MDN，並CasperJS，我還沒有找到一個還沒有辦法做到這一點，

任何幫助將不勝感激！

Answer 1

您正在尋找Element.children

孩子返回給定元素的子元素的集合。

在您的示例HTML：

var b = document.querySelectorAll('a')[0]; 
alert(b.children[0].src); //First child's source: myimage.jpg 

(fiddle)

Answer 2

文檔對象模型（DOM）API是你在找什麼。 這裏是我覺得有用的網站DOM documentation

在你的實例e.childNodes[n].attributes['href']將是一個例子。

但是，更好的是，如果您使用極端的HTML樹遍歷，我的建議是使用jQuery。它完全是爲了你的目的。