JS - DOM
js

JS – DOM

Опубликовано Автор: Дмитрий Поляков / Нет комментариев

Поиск элементов

document.getElementById('auth')

getElementById – Ищет элемент в HTML по id. Возвращает [object HTMLFormElement]

document.querySelector('.auth')

querySelector – Ищет по CSS селектору, в данном случае по классу auth. Селектор может быть любой, возвращает первый найденный элемент [object HTMLFormElement]

document.querySelectorAll('input,button')

querySelectorAll – Также ищет по CSS селектору, но возвращает все элементы [object NodeList]

Способы обхода object NodeList

1-ый вариант через for:

var collection = document.querySelectorAll('input,button'); 

for (var i = 0, len = collection.length; i < len; i++) {
  var elem = collection[i];
}

2-ой вариант с помощью метода Array.prototype.slice преобразовать нашу коллекцию к настоящему массиву и уже воспользоваться всеми методами, которые есть у массива.

var elems = document.querySelectorAll('input,button');

var elemsList = Array.prototype.slice.call(elems);

elemsList.forEach(function(elem) { 
  ...
});

3-ий вариант – Array.from

var elemsList = Array.from(document.querySelectorAll('input,button'));

elemsList.forEach(function(elem) {
  ...
});

Атрибуты и свойства

getAttribute – читает атрибут

hasAttribute – проверяет наличие атрибута

setAttribute – устанавливает атрибут

removeAttribute – удаляет атрибут

Например:

var form = document.getElementById('auth');
form.getAttribute('action'); 
form.setAttribute('method', 'POST');
form.hasAttribute('method');
form.removeAttribute('method');

data-атрибуты

data-атрибуты – атрибуты, которые начинаются с префикса data-, а далее следует название атрибута в виде латинских букв, цифр и знаков дефиса. И с помощью них можно записывать совершенно произвольные значения под совершенно произвольным именем.

Существует специальный объект dataset, который есть внутри любого DOM- элемента, который содержит значения всех data-атрибутов, которые есть внут- ри этого элемента. Он преобразовывает имя атрибута, убирает от него префикс data-, а все дефисы и последующие буквы преобразуют к CamelCase. Таким образом имя атрибута становится валидным идентификатором для перемен- ной в JavaScript, и мы можем обращаться к нему через так называемую дот- нотацию. И мы можем с помощью этого как обратиться к атрибуту на чтение, так и установить новое значение атрибута, которые будет прописано в DOM- дерево уже в развернутом data- виде.

Например:

form.getAttribute('data-form-value');
form.dataset.formValue;

form.dataset.hasOwnProperty('formValue');

form.dataset.fooBarBazBaf = 'boo';
form.hasAttribute('data-foo-bar-baz-baf');

Свойства

У всех элементов есть как атрибуты, так и свойства. И это совершенно разные вещи

form.getAttribute('action');
form.getAttribute('method'); 
form.getAttribute('id'); 

form.action;
form.method;
form.id;

Лучше пользоваться атрибутами

Классы

Для работы с классами, есть свойство className

form.className;
form.className += ' login-form';

Пользоваться им не очень удобно, удобнее использовать метод classList

  • add – добавляет класс к списку существующих
  • item – получает класс по его индексу и по порядковому расположению в html-элементе
  • contains – позволяет по имени класса проверить, есть ли он внутри этого элемента
  • remove – удаляет класс из html-элемента

Например:

form.classList.add('login-form');
form.classList.item(1);
form.classList.item(2);
form.classList.contains('login-form');
form.classList.remove('login-form');

Создание элементов

createElement – используется для создания элементов

Например:

var elem = document.createElement('span');

elem.className = 'error';
elem.setAttribute('id', 'auth-error');
elem.setAttribute('status', 'auth-error');
elem.textContent = 'Введен неверный логин или пароль';

appendChild – позволяет добавить наш элемент к любому другому, как дочерний

Например добавляем к body

document.body.appendChild(elem);

cloneNode – метод который позволяет скопировать элемент

В качестве параметра, можно передать true или false (значение по умолчанию)

Если передать true – также будут скопированы и все дочерние элементы.

Например:

var clone = elem.cloneNode(true);

Удаление элементов из DOM

  const el = Array.from(spTabl.querySelectorAll('li'));

  el.forEach(element => {
    element.remove();
  });

События в DOM

Добавляем слушателей событий:

var button = document.querySelector('button');

button.addEventListener('click', function(event) {
  console.log(this, event);
});

button.addEventListener('click', clickHandler);

button.addEventListener('click', yetAnotherClickHandler);

События выполняются в порядке их добавления.

Всплытие события

Это значение, которое принимается по умолчанию в браузерах, передается третьим параметром. При нем событие как бы поднимается вверх, от самого глубокого DOM-узла — к самому верхнему и заканчивается на объекте document, который описывает весь наш HTML документ.

Погружение события

При этом обработчике событий событие погружается от самого верхнего эле- мента к самому глубокому, самому нижнему, на котором оно могло бы про- изойти, и сначала срабатывает на объекте document и постепенно погружается вниз. Для того, чтобы событие перехватывалось, в качестве последнего параметра в addEventListener вам нужно передать true.

Остановка всплытия или погружения

Иногда вы хотите остановить событие на каком-то конкретном участке и не хотите, чтобы оно всплывало или погружалось далее. Для того, чтобы остановить всплытие, существует метод stopPropagation, который вызывается у объекта «событие».

var button = document.querySelector('button');

button.addEventListener('click', function(event) {
  event.stopPropagation();
}, true);

Отмена действий по умолчанию

У многих DOM-элементов есть так называемые действия по умолчанию. На- пример, при клике на ссылки, мы переходим по ссылке, при клике по кнопке мы отправляем форму.Для того чтобы отменить действие по умолчанию, су- ществует метод preventDefault, который вызывается у объекта-события.

var form = document.getElementById('auth');
  form.addEventListener('submit', function(event) { 
    console.log(event.target);
    event.preventDefault();
});

Делегирование событий

Делегировние событий – метод обработки события на родительском элементе относительно того, на котором оно произошло фактически. Получить сам элемент, на котором произошло событие, можем при помощи event.target

Дмитрий Поляков

Оставить комментарий