metodi_js_dlja_roboti_z_dom

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
metodi_js_dlja_roboti_z_dom [2023/11/26 10:16]
tro 		metodi_js_dlja_roboti_z_dom [2023/12/28 19:32] (текущий)
tro [removeEventListener]
Строка 4: Строка 4:
 <code> <code>
 const categoriesList = document.getElementById('categories'); const categoriesList = document.getElementById('categories');
 +</code>
 +===== querySelectorAll =====
 +Метод querySelectorAll() Document повертає статичний (не динамічний) NodeList, що містить усі знайдені елементи документа, які відповідають зазначеному селектору.
 +<code>
 +const categoriesList = document.getElementById('categories');
 +const categoryItems = categoriesList.querySelectorAll('li.item');
 +console.log(`Number of categories: ${categoryItems.length}`); 
 </code> </code>
 ===== element.querySelector===== ===== element.querySelector=====
Строка 86: Строка 93:
 містить псевдомасив, у якому зібрані всі дочірні вузли-елементи вузла elem, тобто ті, що відповідають тегам містить псевдомасив, у якому зібрані всі дочірні вузли-елементи вузла elem, тобто ті, що відповідають тегам
 ===== elem.firstChild ===== ===== elem.firstChild =====
-містить посилання на перший дочірній вузол (вузол-елемент або текстовий вузол) вузла elem+містить посилання на перший дочірній вузол (вузол-елемент або текстовий вузол) вузла elem. 
 +УВАГА - першим майже завжди буде текстовим вузлом бо між тегами є пробіл та перенос строки.
 ===== elem.firstElementChild ===== ===== elem.firstElementChild =====
 містить посилання на перший дочірній вузол-елемент усередині elem, тобто той, що відповідає тегу містить посилання на перший дочірній вузол-елемент усередині elem, тобто той, що відповідає тегу
Строка 109: Строка 117:
 </code> </code>
 ==== dataset ==== ==== dataset ====
-Для отримання значення data-атрибута використовується властивість dataset, після якої через крапку пишеться ім'я атрибута без data-. Тобто data- відкидається, а інша частина імені записується як ім'я властивості об'єкта.+**Зберігає користувацькі дата-атрибути**. Зручніше працювати через **dataset**. Для отримання значення data-атрибута використовується властивість dataset, після якої через крапку пишеться ім'я атрибута без data-. Тобто data- відкидається, а інша частина імені записується як ім'я властивості об'єкта.
 <code> <code>
 const saveBtn = document.querySelector('button[data-action="save"]'); const saveBtn = document.querySelector('button[data-action="save"]');
Строка 120: Строка 128:
 Для видалення data-атрибута Для видалення data-атрибута
 ===== Створення елементів у DOM ===== ===== Створення елементів у DOM =====
 +==== createDocumentFragment ====
 +Створює новий порожній DocumentFragment, до якого можна додати вузли DOM для побудови позаекранного дерева DOM.
 +<code>
 +const fragment = document.createDocumentFragment();
 +</code>
 +
 ==== createElement ==== ==== createElement ====
 створює елемент з ім'ям tagName і повертає посилання на його об’єкт як результат свого виконання. створює елемент з ім'ям tagName і повертає посилання на його об’єкт як результат свого виконання.
Строка 147: Строка 161:
 ==== Читання innerHTML ==== ==== Читання innerHTML ====
 Властивість innerHTML зберігає вміст елемента, включно з тегами, у вигляді рядка. Значення, що повертається, — це **завжди валідний HTML-код**. Властивість innerHTML зберігає вміст елемента, включно з тегами, у вигляді рядка. Значення, що повертається, — це **завжди валідний HTML-код**.
 +Він затира структуру що була і заміняє собою нову  HTML-розмітку
 <code> <code>
-const link = document.querySelector(".one"); +const = '<div class="myClass"></div>' 
-console.log(link.innerHTML);+const myNewHtml = document.querySelector(".one"); 
 +link.innerHTML(myNewHtml);
 </code> </code>
 ==== Зміна innerHTML ==== ==== Зміна innerHTML ====
Строка 174: Строка 190:
   * **handler** — колбек-функція, яка буде викликана під час настання події   * **handler** — колбек-функція, яка буде викликана під час настання події
   * **options** — необов'язковий об'єкт параметрів із розширеними налаштуваннями   * **options** — необов'язковий об'єкт параметрів із розширеними налаштуваннями
 +<code>
 +const myBtn = doucument.querySelector('.js-button-click');
  
 +myBtn.addEventListener('click',onButtonClick);
 +
 +function onButtonClick (){
 +console.log('Hello');
 +}
 +</code>
 +або
 <code> <code>
 const button = document.querySelector(".my-button"); const button = document.querySelector(".my-button");
Строка 195: Строка 220:
 видаляє слухача події з елемента. видаляє слухача події з елемента.
 <code> <code>
-element.removeEventListener(event, handler, options)+element.removeEventListener(event, handler, options); 
 +</code> 
 + 
 +<code> 
 +element.removeEventListener('onclick', myfunction);
 </code> </code>
 ====== Об'єкт події ====== ====== Об'єкт події ======
Строка 236: Строка 265:
 </code> </code>
 ====== Події елементів форм ====== ====== Події елементів форм ======
 +===== reset =====
 +Очистка данних полів на формі
 +<code>
 +const registerForm = document.querySelector(".login-form");
 +registerForm.reset();
 +</code>
 ===== submit ===== ===== submit =====
 Відправлення форми відбувається: Відправлення форми відбувається:
   * при кліку на кнопку з атрибутом type="submit"   * при кліку на кнопку з атрибутом type="submit"
   * Або при натисканні клавіші Enter під час перебування в будь-якому її текстовому полі форми   * Або при натисканні клавіші Enter під час перебування в будь-якому її текстовому полі форми
 +
 +<code>
 +const form = document.querySelector("form");
 +
 +form.addEventListener("submit", handleSubmit);
 +
 +function handleSubmit(event) {
 +  event.preventDefault();
 +  console.log(event.elements.email.value);
 +.
 +.
 +.
 +  }
 +  
 +  
 +
 +</code>
 +або
 <code> <code>
 const form = document.querySelector("form"); const form = document.querySelector("form");
Строка 247: Строка 300:
 }); });
 </code> </code>
 +або
 +<code>
 +const registerForm = document.querySelector(".form");
 +
 +registerForm.addEventListener("submit", handleSubmit);
 +
 +function handleSubmit(event) {
 +  event.preventDefault();
 +  cont form = event.target;
 +  const login = form.elements.login.value;
 +  const password = form.elements.password.value;
 +  
 +  if (login === "" || password === "") {
 +    return console.log("Please fill in all the fields!");
 +  }
 +</code>
 +**event.preventDefault()** - відключення подіій браузер за замовченням. Наприклад перезавантаження сторінки при події submit
 ===== preventDefault ===== ===== preventDefault =====
 Для скасування дії браузера за замовчуванням в об'єкта події Для скасування дії браузера за замовчуванням в об'єкта події
Строка 257: Строка 327:
 </code> </code>
 ===== change ===== ===== change =====
-Подія відбувається після зміни значення елемента форми +Подія відбувається після зміни значення елемента форми і одночасної втрати фокусу
 ===== input ===== ===== input =====
 Подія input відбувається тільки на текстових полях і textarea. Подія input відбувається тільки на текстових полях і textarea.
Строка 295: Строка 365:
 </code> </code>
 Поточний елемент, на якому знаходиться фокус, доступний як **document.activeElement** Поточний елемент, на якому знаходиться фокус, доступний як **document.activeElement**
 +===== stopPropagation =====
 +Так як подія від дочерного обїекта сплаивє до батьківського і може бути перехоплена дсь "вище", то це сплаивання можна зупинити.
 +  * Зупиняє "спливання" події в DOM-дереві. Це означає, що жоден батьківський елемент не зможе відловити цю подію.
 +  * Не заважає іншим обробникам подій виконуватися на тому ж самому елементі.
 +<code>
 +const descendant = document.querySelector("#descendant");
 +descendant.addEventListener("click", (event) => {
 +  event.stopPropagation();
 +  alert("Descendant click handler");
 +});
 +</code>
 +===== stopImmediatePropagation() =====
 +  * Зупиняє "спливання" події так само, як event.stopPropagation().
 +  * Також зупиняє виконання всіх інших обробників подій, які слухають цю ж подію на даному елементі, навіть якщо вони були зареєстровані перед цим.
 +
 +===== nodeName (перевірка відповідности типу єлементу) =====
 +<code>
 +function selectColor(event) {
 +  if (event.target.nodeName !== "BUTTON") {
 +    return; // користувач клікнув між кнопками
 +  }
 +
 +  const selectedColor = event.target.dataset.color; // користувач клікнув на кнопку і ми маємо доступ до її атрибутів
 +}
 +</code>
 +
  • /sites/data/attic/metodi_js_dlja_roboti_z_dom.1700993791.txt.gz
  • Последнее изменение: 2023/11/26 10:16
  • — tro