Question

我在控制台中使用JS，需要从网站上的链接中获取href。

elements = document.getElementsByClassName("product");

var array = []

for (var i = 0; i < elements.length; i++) {
    array.push(elements[i].getElementsByTagName("a").href);
    console.log(array);
}

当我将.href链接到getElementsByTagName时，它未定义。

我错过了什么？

由于

Answer 1

getElementsByTagName返回元素集合，而不是单个元素。

试试这个：

array.push(elements[i].getElementsByTagName("a")[0].href);

Answer 2

虽然问题是，如前所述，你不能从NodeList中返回的单个元素中检索属性而不迭代这些元素，你可以比上面更简洁一点：

// using Array.prototype.map, with Function.prototype.call,
// to iterate over the results of the array-like NodeList returned
// document.querySelectorAll(), and storing the returned values
// in an array:
var array = Array.prototype.map.call(document.querySelectorAll('.product a'), function (aElement) {
    // returning the href property of the <a> elements to the array:
    return aElement.href;
});

console.log(array); // ["http://fiddle.jshell.net/_display/#internalLink", "http://www.google.com/", "http://meta.stackoverflow.com/"]

JS Fiddle demo

使用以下HTML：

<div class="product"> <a href="#internalLink">Internal link</a>    
</div>
<div class="product"> <a href="//www.google.com/">Link to Google</a>    
</div>
<div class="product"> <a href="//meta.stackoverflow.com">Link to Meta</a>    
</div>

参考文献：

如何在JS中获得A href

2 个答案: