Использование методов класса Array для HTMLCollection DOM traversel в ES6

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

Если вам нужно просто манипулировать DOM, то вы ВНЕ усложняете вещи.

ES6 не добавляет ничего нового для манипулирования DOM ... Что касается jQuery, то это просто библиотека, которая делает вещи прощеВы (также нормализует различное поведение между браузерами).

Манипулирование DOM - поиск, добавление, удаление и редактирование элементов со страницы.

выбор элемента DOM можно выполнить с помощью одного из следующих

1. document.querySelector ();
2. doucment.querySelectorAll ();
3. document.getElementById ();
4. document.getElementsByClassName ();
5. document.getElementsByName ();
6. document.getElementsByTagName ();

Редактирование:

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

Удаление:

document.removeChild(childNode);        

Подробнее читайте по адресу:

Объект элемента HTML DOM

Свойства и методы объекта документа

Answer 2

Другим способом преобразования коллекции в массив является использование синтаксиса распространения :

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

. Существует вопрос о наиболее эффективном способе согласования HTMLCollection с обсуждаемым массивом.различные способы: Самый эффективный способ преобразования коллекции HTMLC в массив

Answer 3

Самый простой подход - сначала преобразовать его в массив с помощью Array.from:

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