97 lines
3.4 KiB
Markdown
97 lines
3.4 KiB
Markdown
### Работа с атрибутом class
|
||
|
||
Добавить класс элементу
|
||
|
||
```js
|
||
element.classList.add('animate')
|
||
```
|
||
|
||
Проверить наличие класса
|
||
|
||
```js
|
||
if (element.classList.contains('animate')){
|
||
|
||
}
|
||
```
|
||
|
||
Удалить класс
|
||
|
||
```js
|
||
element.classList.remove('класс');
|
||
```
|
||
|
||
|
||
|
||
|
||
### Работа с атрибутом data-
|
||
|
||
Получить значение атрибута data-**active**
|
||
```js
|
||
element.dataset.action;
|
||
```
|
||
Проверка наличиея атрибута
|
||
|
||
```js
|
||
if ('id' in element.dataset) {
|
||
console.log(element.dataset.id);
|
||
}
|
||
```
|
||
|
||
Изменить значение атрибута data-**active**
|
||
```js
|
||
element.dataset.action = 8;
|
||
```
|
||
|
||
|
||
### Работа с DOM
|
||
```js
|
||
e.target.children // коллекция детей, которые являются элементами.
|
||
e.target.firstElementChild // Получить первый дочерний элемент
|
||
e.target.lastElementChild // Получить последний дочерний элемент
|
||
e.target.previousElementSibling // Получить предыдущего соседа
|
||
e.target.nextElementSibling // Получить следующего соседа
|
||
e.target.parentElement // Получить родителя
|
||
```
|
||
|
||
### Работа с таблицами
|
||
|
||
```js
|
||
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>.
|
||
```
|
||
|
||
|
||
### Добавление текста
|
||
|
||
```js
|
||
document.getElementById('ID').insertAdjacentHTML(where, "<b>HTML текст</b>").
|
||
|
||
// where - Варианты "куда" вставить
|
||
// "beforebegin" – вставить html непосредственно перед elem,
|
||
// "afterbegin" – вставить html в начало elem,
|
||
// "beforeend" – вставить html в конец elem,
|
||
// "afterend" – вставить html непосредственно после elem.
|
||
```
|
||
|
||
##Вот методы для различных вариантов вставки:
|
||
```js
|
||
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 заданными узлами или строками.
|
||
```
|