代码之家 › 专栏 › 技术社区 › Daniel Viglione

在ES6中为HTMLCollection DOM traversel使用数组类方法

ecmascript-6 javascript

Daniel Viglione · 技术社区 · 7 年前

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

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方法是 . 但是HTMLCollection没有这样的方法。

这是ES6的合适解决方案还是HTMLCollection类提供了类似的解决方案?

3 回复 | 直到 7 年前

loganfsmyth 7 年前

Array.from :

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

Stoil Ivanov 7 年前

ES6没有为DOM操作添加任何新内容。。。至于jQuery,它只是一个使事情变得更简单的库(还规范了浏览器之间的不同行为)。

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

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

document.querySelector();
doucment.querySelectorAll();
document.getElementById();
document.getElementsByName();

编辑:

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

Felix B. 7 年前

spread syntax :

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

关于将HTMLCollection协调到数组的最有效方法,有一个问题,讨论了各种方法: Most efficient way to convert an HTMLCollection to an Array

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前