blanks/js/DOM/DOM.md

Работа с атрибутом class

Добавить класс элементу

element.classList.add('animate')

Проверить наличие класса

    if (element.classList.contains('animate')){

    }

Удалить класс

element.classList.remove('класс');

Работа с атрибутом data-

Получить значение атрибута data-active

element.dataset.action;

Проверка наличиея атрибута

 if ('id' in element.dataset) {
    console.log(element.dataset.id);
 }

Изменить значение атрибута data-active

element.dataset.action = 8;

Работа с DOM

e.target.children  // коллекция детей, которые являются элементами.
e.target.firstElementChild // Получить первый дочерний элемент
e.target.lastElementChild // Получить последний дочерний элемент
e.target.previousElementSibling // Получить предыдущего соседа 
e.target.nextElementSibling // Получить следующего соседа
e.target.parentElement // Получить родителя

Работа с таблицами

table.rows  // коллекция строк <tr> таблицы.
table.caption // ссылки на элемент<caption>
table.tHead  //  ссылки на элемент <thead>
table.tFoot //   ссылки на элемент <tfoot> 

table.tBodies  // коллекция элементов таблицы <tbody> (по спецификации их может быть больше одного).
               // <thead>, <tfoot>, <tbody> предоставляют свойство rows:

tbody.rows   //– коллекция строк <tr> секции.

tr.cells  // коллекция <td> и <th> ячеек, находящихся внутри строки <tr>.
tr.sectionRowIndex //  номер строки <tr> в текущей секции <thead>/<tbody>/<tfoot>.
tr.rowIndex // номер строки <tr> в таблице (включая все строки таблицы).

td.cellIndex // номер ячейки в строке <tr>.

Добавление текста

document.getElementById('ID').insertAdjacentHTML(where, "<b>HTML текст</b>").

// where - Варианты "куда" вставить
// "beforebegin" – вставить html непосредственно перед elem,
// "afterbegin" – вставить html в начало elem,
// "beforeend" – вставить html в конец elem,
// "afterend" – вставить html непосредственно после elem.

##Вот методы для различных вариантов вставки:

node.append(...nodes or strings) //– добавляет узлы или строки в конец node,
node.prepend(...nodes or strings) //– вставляет узлы или строки в начало node,
node.before(...nodes or strings) //–- вставляет узлы или строки до node,
node.after(...nodes or strings) //–- вставляет узлы или строки после node,
node.replaceWith(...nodes or strings) //–- заменяет node заданными узлами или строками.