ItBursa. Блок первый

Видео #3. Изменение HTML с помощью JavaScript

Ищем нужный элемент

document.querySelector("css-selector");

Возвращает один элемент, если элементов несколько, возвращает первый

Близкий по смыслу селектор

document.querySelectorAll("css-selector");

Возвращает массив из всех найденных элементов.
Для существующего на странице элемента

document.querySelector("css-selector") == document.querySelectorAll("css-selector")[0]

Для несуществующего элемента есть различие:

document.querySelector("css-selector"); вернёт null
document.querySelectorAll("css-selector"); вернёт отсутствующий элемент массива, т.е undefined

Стилизуем элемент

element.style.backgroundColor = "red";

Для сравнения: как записываются свойства в css и js

css: background-color
js: backgroundColor

Для свойств, состоящих из одного слова, различий нет

element.style.width = "500px";
element.style.border = "solid black 5px";

Добавляем элемент на страницу

element.innerHTML = "text";

Доступ JS к HTML

Чтобы js мог изменить html-элемент, последний должен присутствовать не только в разметке, но и на странице. То есть на момент срабатывания js-кода страница уже должна загрузиться. Как этого добиться

1. подключать js в конце страницы перед закрывающим </body>
2. подключить js с параметром defer
    <script src="script.js" defer></script>
Скрипт с defer сработает только когда весь html-документ будет обработан браузером
3. Начинать код с конструкции
window.addEventListener("load", function(){
    здесь код
});
Она означает, что код начнёт выполняться только когда произойдёт событие load - загрузка.

Видео #4. Введения в события в JavaScript 

element.addEventListener("click", function(){ ... });

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

Подробнее: https://learn.javascript.ru/event-bubbling
Несколько дивов 1, 2, 3 вложены друг в друга.

  <div class="block3">
       <div class="block2">
           <div class="block1"></div>
       </div>
   </div>


У каждого из них есть свой обработчик событий. Если кликнуть по самому внутреннему диву, сработает его обработчик, потом обработчик дива 2, потом дива 3, потом body и html, если у них были события. Произошло всплытие.

Чтобы запретить всплытие, используется команда

event.stopPropagation();

Эта команда запрещает элементу уведомлять о событии остальных.
Команда существует, но использовать её без особой необходимости не рекомендуется

Команда

event.stopImmediatePropagation();

Прекращает обработку событий, которые находятся ниже по коду 

Кроме события всплытия есть событие погружения.
Т.е, когда кликаем по диву 1, обработчик проверяет нет ли события у html, потом у body, потом у дива 3, 2 и наконец доходит до дива 1. Это называется погружение. После погружения в обратном порядке идёт всплытие.

По умолчанию addEventListener работает на всплытие. Чтобы изменить это поведение дописываем true

element.addEventListener("click", function(){ ... }, true);

Теперь при клике по body будут менять цвет вложенные блоки.

Элемент, который вызывает событие, доступен как event.target. this - элемент, на котором событие произошло. event.target и this могут быть одним элементом и разными.