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

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。它完全是出于您的目的。

在JavaScript中，如何访问子节点的属性？

2 个答案: