Using Array class methods for HTMLCollection DOM traversel in ES6

Question

I am trying to avoid using jQuery for DOM manipulation. I prefer to use ES6 features. ES6 has a robust array class, so I am considering converting HTMLCollection objects into arrays and then parsing them using the Array class:

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

The es6 method I am using here is find(). But HTMLCollection has no such method.

Is this the appropriate solution for ES6 or does the HTMLCollection class offer something similar?

score 3 · Accepted Answer · answered Dec 11 '18 at 17:43

3

The easiest approach is to convert it to an array first with Array.from:

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

answered Dec 11 '18 at 17:43

loganfsmyth

156,129
30
331
251

score 0 · Answer 2 · answered Dec 11 '18 at 17:55

If what you want is to simply manipulate the DOM you are OVER complicating things.

ES6 does not add anything new for DOM manipulation... As for jQuery it is simply a library that makes things easier for you (also normalizes different behavior between browsers).

DOM manipulation - searching, adding, deleting and editing elements from the page.

selecting a DOM element can be done using one of the following

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

Editing:

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

Deleting:

document.removeChild(childNode);

You can read more at:

The HTML DOM Element Object

Document Object Properties and Methods

Felix B. · Answer 3 · 2018-12-11T18:55:04.860

0

Another way of converting a collection to an array is using the spread syntax:

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

There is this question about the most efficient way of concerting an HTMLCollection to an Array discussing the various ways: Most efficient way to convert an HTMLCollection to an Array

edited Dec 11 '18 at 18:55

answered Dec 11 '18 at 18:02

Felix B.

166
8

Using Array class methods for HTMLCollection DOM traversel in ES6

3 Answers3