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);

Answer 2

如果您只是想简单地操作DOM，那么您将使事情变得复杂。

ES6不会为DOM操作添加任何新内容...就jQuery而言，它只是一个使您更轻松的库（还规范了浏览器之间的不同行为）。

DOM操作-搜索，添加，删除和编辑页面中的元素。

可以使用以下一种方法来选择DOM元素

document.querySelector（）;
doucment.querySelectorAll（）;
document.getElementById（）;
document.getElementsByClassName（）;
document.getElementsByName（）;
document.getElementsByTagName（）;

编辑：

let element = document.querySelector();
element.innerHTML = "Hello World";
element.setAttribute('data-custom', 123);

删除：

document.removeChild(childNode);

您可以在以下位置了解更多信息：

The HTML DOM Element Object

Document Object Properties and Methods

Answer 3

将集合转换为数组的另一种方法是使用spread syntax：

const collection = [...document.querySelector('#tblEvents').rows];

存在一个有关将HTMLCollection与Array协调的最有效方法的问题，该方法讨论了各种方法： Most efficient way to convert an HTMLCollection to an Array

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

3 个答案: