如何将DOM元素数组中各元素的href属性提取为新数组？

你的原代码存在逻辑问题：map方法会遍历数组的每个元素并传入回调函数，但你定义的link函数不仅重复循环了整个数组，还没有返回值，最终arra会是一个全为undefined的数组，根本达不到预期效果。

下面是几种更简洁、正确的实现方式：

1. ES5风格简化写法 #

先把querySelectorAll返回的类数组转为真正的数组，再用map直接提取每个元素的href：

let countries = document.querySelectorAll('.el');
let countriesList = Array.prototype.slice.call(countries);
let hrefArray = countriesList.map(function(el) {
  return el.getAttribute('href');
});
console.log(hrefArray);

也可以链式调用简化代码：

let hrefArray = Array.prototype.slice.call(document.querySelectorAll('.el'))
  .map(el => el.getAttribute('href'));

2. ES6+更优雅的写法 #

用Array.from可以一步完成类数组转数组+映射操作：

let hrefArray = Array.from(document.querySelectorAll('.el'), el => el.getAttribute('href'));

或者用扩展运算符...快速转数组：

let hrefArray = [...document.querySelectorAll('.el')].map(el => el.getAttribute('href'));

3. 获取完整绝对URL的写法 #

如果你需要的是解析后的绝对路径（不是HTML里写的相对路径），可以直接访问元素的href属性（DOM会自动处理路径解析）：

let hrefArray = [...document.querySelectorAll('.el')].map(el => el.href);

比如当前页面在http://yourdomain.com/，el.href会返回http://yourdomain.com/italy.php，而getAttribute('href')只会返回原始的italy.php，根据实际需求选择即可。

内容的提问来源于stack exchange，提问作者lordf