如何遍历取出HTMLCollection里各个节点的属性值，并生成数组

前言

有时，我们想批量取出HTMLCollection里的某个属性值，并将其生成数组，这里，为大家介绍一种简单有效的方法。

例子代码如下所示：

var div = document.createElement('div')
var p1 = document.createElement('p')
p1.textContent = '1'
var p2 = document.createElement('p')
p2.textContent = '2'
div.appendChild(p1)
div.appendChild(p2)

此时，我们控制台打印div..children，输出一个HTMLCollection集合，如下图所示

我们该如何将p里的innerHTML取出，并生成数组呢？

正文

function prop(name) {
    return function (obj) {
        return obj[name];
    };
}
function map(fn, list) {
    var ret = [];
    for (var i = 0; i < list.length; ++i) {
        ret[i] = fn(list[i]);
    }
    return ret;
}
var inner = prop('innerHTML'); // 亦可配置其他属性，如class

map(inner, div.children); // 输出["1", "2"]

上述代码简单有效，可灵活控制输出节点对应的属性集合。

如果，我想取出HTMLCollection集合内的class，代码如下图所示：

div.children[0].classList = 'class1'
div.children[1].classList = 'class2'

var classI = prop('className')
map(classI, div.children) // ["class1", "class2"]

TS写法

function prop<T> (name: string) {
  return function (obj: {[index: string]: T}) {
    return obj[name]
  }
}

function map (fn: any, list: any[]) {
  var ret = []
  for (var i = 0; i < list.length; ++i) {
    ret[i] = fn(list[i])
  }
  return ret
}

var inner = prop('innerHTML')

看完之后，是不是觉得真香?