javascript - ES6中使用Array类方法进行HTMLCollection DOM遍历

Question

我试图避免使用 jQuery 进行 DOM 操作。我更喜欢使用 ES6 功能。 ES6 有一个强大的数组类，因此我正在考虑将 HTMLCollection 对象转换为数组，然后使用 Array 类解析它们:

actual = [ '10/12/2018', 'Affidavit', 'Party', 7 ];
collection = Array.prototype.slice.call( document.querySelector('#tblEvents').rows )
target_row = collection.find(function(row){
  predicate = row.cells[0].innerText.trim() == actual[0] && row.cells[1].innerText.trim() == actual[1] && row.cells[4].innerText.trim() == actual[3];
  if(predicate){
    if(actual[2] !== null && actual[2] !== ''){
      return actual[2] == row.cells[2].innerText.trim();
    } else {
      return true;
    } 
  }

  return false;
})

我在这里使用的 es6 方法是 find()。但HTMLCollection没有这样的方法。

这是适合 ES6 的解决方案还是 HTMLCollection 类提供类似的东西？

Answer 1

最简单的方法是先使用Array.from将其转换为数组:

const collection = Array.from(document.querySelector('#tblEvents').rows);