Техніки роботи з DOM: батьківські, дочірні і сусідні елементи. Маніпуляції з DOM на чистому JavaScript Перевірка існування дочірніх вузлів

Як правило, коли потрібно виконати будь-які дії з DOM, розробники використовують jQuery. Однак практично будь-яку маніпуляцію з DOM можна зробити і на чистому JavaScript за допомогою його DOM API.

Розглянемо цей API більш докладно:

В кінці ви напишете свою простеньку DOM-бібліотеку, яку можна буде використовувати в будь-якому проекті.

DOM-запити

DOM-запити здійснюються за допомогою метода.querySelector (), який в якості аргументу приймає довільний СSS-селектор.

Const myElement \u003d document.querySelector ( "# foo\u003e div.bar")

Він поверне перший відповідний елемент. Можна і навпаки - перевірити, чи відповідає елемент селектору:

MyElement.matches ( "div.bar") \u003d\u003d\u003d true

Якщо потрібно отримати всі елементи, відповідні селектору, використовуйте наступну конструкцію:

Const myElements \u003d document.querySelectorAll ( ". Bar")

Якщо ж ви знаєте, на який батьківський елемент потрібно послатися, можете просто проводити пошук серед його дочірніх елементів, замість того щоб шукати по всьому коду:

Const myChildElemet \u003d myElement.querySelector ( "input") // Замість: // document.querySelector ( "# foo\u003e div.bar input")

Виникає питання: навіщо тоді використовувати інші, менш зручні методи вроде.getElementsByTagName ()? Є маленька проблема - результат вивода.querySelector () не оновлюється, і коли ми додамо новий елемент (дивіться), він не зміниться.

Const elements1 \u003d document.querySelectorAll ( "div") const elements2 \u003d document.getElementsByTagName ( "div") const newElement \u003d document.createElement ( "div") document.body.appendChild (newElement) elements1.length \u003d\u003d\u003d elements2.length // false

Також querySelectorAll () збирає все в один список, що робить його дуже ефективно.

Як працювати зі списками?

Додатково до всього у.querySelectorAll () є два маленьких нюансу. Ви не можете просто викликати методи на результати і очікувати, що вони застосуються до кожного з них (як ви могли звикнути робити це з jQuery). У будь-якому випадку потрібно буде перебирати всі елементи в циклі. Друге - що повертається об'єкт є списком елементів, а не масивом. Отже, методи масивів не спрацюють. Звичайно, є методи і для списків, щось вроде.forEach (), але, на жаль, вони підходять не для всіх випадків. Так що краще перетворити список в масив:

// Використання Array.from () Array.from (myElements) .forEach (doSomethingWithEachElement) // Або прототип масиву (до ES6) Array.prototype.forEach.call (myElements, doSomethingWithEachElement) // Простіше: .forEach.call (myElements , doSomethingWithEachElement)

У кожного елемента є деякі властивості, що посилаються на «сім'ю».

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

Оскільки інтерфейс елемента (Element) успадкований від інтерфейсу вузла (Node), такі властивості теж присутні:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

Перші властивості посилаються на елемент, а останні (за ісключеніем.parentElement) можуть бути списками елементів будь-якого типу. Відповідно, можна перевірити і тип елемента:

MyElement.firstChild.nodeType \u003d\u003d\u003d 3 // цей елемент буде текстовим вузлом

Додавання класів і атрибутів

Додати новий клас дуже просто:

MyElement.classList.add ( "foo") myElement.classList.remove ( "bar") myElement.classList.toggle ( "baz")

Додавання властивості для елементу відбувається точно так само, як і для будь-якого об'єкта:

// Отримання значення атрибута const value \u003d myElement.value // Установка атрибута як властивості елемента myElement.value \u003d "(! LANG: foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Можна використовувати методи.getAttibute (), .setAttribute () і.removeAttribute (). Вони відразу ж поміняють HTML-атрибути елемента (на відміну від DOM-властивостей), що викличе браузерную перерисовку (ви зможете побачити всі зміни, вивчивши елемент за допомогою інструментів розробника в браузері). Такі перемальовування не тільки вимагають більше ресурсів, ніж установка DOM-властивостей, але і можуть привести до непередбачених помилок.

Як правило, їх використовують для елементів, у яких немає відповідних DOM-властивостей, наприклад colspan. Або ж якщо їх використання дійсно необхідно, наприклад для HTML-властивостей при спадкуванні (дивіться).

Додавання CSS-стилів

Додають їх точно так же, як і інші властивості:

MyElement.style.marginLeft \u003d "2em"

Якісь певні властивості можна задавати іспользуя.style, але якщо ви хочете отримати значення після деяких обчислень, то краще використовувати window.getComputedStyle (). Цей метод отримує елемент і повертає CSSStyleDeclaration, що містить стилі як самого елемента, так і його батька:

Window.getComputedStyle (myElement) .getPropertyValue ( "margin-left")

зміна DOM

Можна переміщати елементи:

// Додавання element1 як останнього дочірнього елемента element2 element1.appendChild (element2) // Вставка element2 як дочірнього елемента element1 перед element3 element1.insertBefore (element2, element3)

Якщо не хочеться переміщати, але потрібно вставити копію, використовуємо:

// Створення клону const myElementClone \u003d myElement.cloneNode () myParentElement.appendChild (myElementClone)

Метод.cloneNode () приймає логічне значення як аргумент, при true також клонуються і дочірні елементи.

Звичайно, ви можете створювати нові елементи:

Const myNewElement \u003d document.createElement ( "div") const myNewTextNode \u003d document.createTextNode ( "some text")

А потім вставляти їх як було показано вище. Видалити елемент безпосередньо не вийде, але можна зробити це через батьківський елемент:

MyParentElement.removeChild (myElement)

Можна звернутися і побічно:

MyElement.parentNode.removeChild (myElement)

Методи для елементів

У кожного елемента присутні такі властивості, как.innerHTML і.textContent, вони містять HTML-код і, відповідно, сам текст. У наступному прикладі змінюється вміст елемента:

// Змінюємо HTML myElement.innerHTML \u003d `

Насправді зміна HTML - погана ідея, т. К. Втрачаються всі зміни, які були зроблені раніше, а також перевантажуються обробники подій. Краще використовувати такий спосіб тільки повністю відкинувши весь HTML і замінивши його копією з сервера. Ось так:

Const link \u003d document.createElement ( "a") const text \u003d document.createTextNode ( "continue reading ...") const hr \u003d document.createElement ( "hr") link.href \u003d "foo.html" link.appendChild ( text) myElement.appendChild (link) myElement.appendChild (hr)

Однак це спричинить за собою дві перемальовування в браузері, в той час как.innerHTML призведе тільки до однієї. Обійти це можна, якщо спочатку додати все в DocumentFragment, а потім додати потрібний вам фрагмент:

Const fragment \u003d document.createDocumentFragment () fragment.appendChild (text) fragment.appendChild (hr) myElement.appendChild (fragment)

обробники подій

Один з найпростіших оброблювачів:

MyElement.onclick \u003d function onclick (event) (console.log (event.type + "got fired"))

Але, як правило, його слід уникати. Здесь.onclick - властивість елемента, і по ідеї ви можете його змінити, але ви не зможете додавати інші обробники використовуючи ще одну функцію, що посилається на стару.

Для додавання обробників краще іспользовать.addEventListener (). Він приймає три аргументи: тип події, функцію, яка буде викликатися щоразу при спрацьовуванні, і об'єкт конфігурації (до нього ми повернемося пізніше).

MyElement.addEventListener ( "click", function (event) (console.log (event.type + "got fired"))) myElement.addEventListener ( "click", function (event) (console.log (event.type + " got fired again ")))

Властивість event.target звертається до елементу, за яким закріплено подія.

А так ви зможете отримати доступ до всіх властивостей:

// Властивість `forms` - масив, що містить посилання на всі форми const myForm \u003d document.forms const myInputElements \u003d myForm.querySelectorAll (" input ") Array.from (myInputElements) .forEach (el \u003d\u003e (el.addEventListener (" change ", function (event) (console.log (event.target.value)))))

Запобігання дій за замовчуванням

Для цього використовується метод.preventDefault (), який блокує стандартні дії. Наприклад, він заблокує відправку форми, якщо авторизація на клієнтської стороні не була успішною:

MyForm.addEventListener ( "submit", function (event) (const name \u003d this.querySelector ( "# name") if (name.value \u003d\u003d\u003d "(! LANG: Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Метод.stopPropagation () допоможе, якщо у вас є певний оброблювач події, закріплений за дочірнім елементом, і другий обробник того ж події, закріплений за батьком.

Як говорилося раніше, метод.addEventListener () приймає третій необов'язковий аргумент у вигляді об'єкта з конфігурацією. Цей об'єкт повинен містити будь-які з наступних булевих властивостей (за замовчуванням всі в значенні false):

• capture: подія буде прикріплено до цього елементу перед будь-яким іншим елементом нижче в DOM;
• once: подія може бути закріплено лише один раз;
• passive: event.preventDefault () буде ігноруватися (виняток під час помилки).

Найбільш поширеним властивістю является.capture, і воно настільки поширене, що для цього існує короткий спосіб запису: замість того щоб передавати його в об'єкті конфігурації, просто вкажіть його значення тут:

MyElement.addEventListener (type, listener, true)

Обробники видаляються за допомогою метода.removeEventListener (), що приймає два аргументи: тип події і посилання на оброблювач для видалення. Наприклад властивість once можна реалізувати так:

MyElement.addEventListener ( "change", function listener (event) (console.log (event.type + "got triggered on" + this) this.removeEventListener ( "change", listener)))

спадкування

Припустимо, у вас є елемент і ви хочете додати обробник подій для всіх його дочірніх елементів. Тоді б вам довелося прогнати їх в циклі, використовуючи метод myForm.querySelectorAll ( "input"), як було показано вище. Однак ви можете просто додати елементи в форму і перевірити їх вміст за допомогою event.target.

MyForm.addEventListener ( "change", function (event) (const target \u003d event.target if (target.matches ( "input")) (console.log (target.value))))

І ще один плюс даного методу полягає в тому, що до нових дочірнім елементам обробник буде прив'язуватися автоматично.

анімація

Найпростіше додати анімацію використовуючи CSS з властивістю transition. Але для більшої гнучкості (наприклад для гри) краще підходить JavaScript.

Викликати метод window.setTimeout (), поки анімація не закінчиться, - не найкраща ідея, так як ваш додаток може зависнути, особливо на мобільних пристроях. Краще використовувати window.requestAnimationFrame () для збереження всіх змін до наступної перемальовування. Він приймає функцію як аргумент, яка в свою чергу отримує мітку часу:

Const start \u003d window.performance.now () const duration \u003d 2000 window.requestAnimationFrame (function fadeIn (now)) (const progress \u003d now - start myElement.style.opacity \u003d progress / duration if (progress< duration) { window.requestAnimationFrame(fadeIn) } }

Таким способом досягається дуже плавна анімація. У своїй статті Марк Браун міркує на цю тему.

Пишемо свою бібліотеку

Той факт, що в DOM для виконання будь-яких операцій з елементами весь час доводиться перебирати їх, може здатися дуже виснажливим в порівнянні з синтаксисом jQuery $ ( ". Foo"). Css ((color: "red")). Але чому б не написати кілька своїх методів, що полегшує це завдання?

Const $ \u003d function $ (selector, context \u003d document) (const elements \u003d Array.from (context.querySelectorAll (selector)) return (elements, html (newHtml) (this.elements.forEach (element \u003d\u003e (element.innerHTML \u003d newHtml)) return this), css (newCss) (this.elements.forEach (element \u003d\u003e (Object.assign (element.style, newCss))) return this), on (event, handler, options) (this.elements .forEach (element \u003d\u003e (element.addEventListener (event, handler, options))) return this)))

Складні і важкі веб-додатки стали звичайними в наші дні. Кросбраузерності і прості у використанні бібліотеки типу jQuery з їх широким функціоналом можуть сильно допомогти в маніпулюванні DOM на льоту. Тому не дивно, що багато розробників використовую подібні бібліотеки частіше, ніж працюють з нативним DOM API, з яким було чимало проблем. І хоча відмінності в браузерах як і раніше залишаються проблемою, DOM знаходиться зараз в кращій формі, ніж 5-6 років тому, коли jQuery набирав популярність.

У цій статті я продемонструю можливості DOM з маніпулювання HTML, сфокусувавшись на відносини батьківських, дочірніх і сусідніх елементів. У висновку я дам дані про підтримку цих можливостей в браузерах, але враховуйте, що бібліотека типу jQuery як і раніше залишається гарною опцією в силу наявності багів і непослідовностей в реалізації нативного функціоналу.

Підрахунок дочірніх вузлів

Для демонстрації я буду використовувати наступну розмітку HTML, протягом статті ми її кілька разів змінимо:

• Example one
• Example two
• Example three
• Example four
• Example five
• Example Six

Var myList \u003d document.getElementById ( "myList"); console.log (myList.children.length); // 6 console.log (myList.childElementCount); // 6

Як бачите, результати однакові, хоча техніки використовуються різні. У першому випадку я використовую властивість children. Це властивість тільки для читання, воно повертає колекцію елементів HTML, що знаходяться всередині запитуваної елемента; для підрахунку їх кількості я використовую властивість length цієї колекції.

У другому прикладі я використовую метод childElementCount, який мені здається більш акуратним і потенційно більш підтримуваним способом (докладніше обговоримо це пізніше, я не думаю, що у вас виникнуть проблеми з розумінням того, що він робить).

Я міг би спробувати використовувати childNodes.length (замість children.length), але подивіться на результат:

Var myList \u003d document.getElementById ( "myList"); console.log (myList.childNodes.length); // 13

Він повертає 13, тому що childNodes це колекція всіх вузлів, включаючи пробіли - враховуйте це, якщо вам важлива різниця між дочірніми вузлами і дочірніми вузлами-елементами.

Перевірка існування дочірніх вузлів

Для перевірки наявності у елемента дочірніх вузлів я можу використовувати метод hasChildNodes (). Метод повертає логічне значення, що повідомляють про їх наявність чи відсутність:

Var myList \u003d document.getElementById ( "myList"); console.log (myList.hasChildNodes ()); // true

Я знаю, що в моєму списку є дочірні вузли, але я можу змінити HTML так, щоб їх не було; тепер розмітка виглядає так:

І ось результат нового запуску hasChildNodes ():

Console.log (myList.hasChildNodes ()); // true

Метод як і раніше повертає true. Хоча список не містить ніяких елементів, в ньому є прогалина, що є дійсним типом вузла. Даний метод враховує всі вузли, не тільки вузли-елементи. Щоб hasChildNodes () повернув false нам треба ще раз змінити розмітку:

І тепер в консоль виводиться очікуваний результат:

Console.log (myList.hasChildNodes ()); // false

Звичайно, якщо я знаю, що можу зіткнутися з пропуском, то спочатку я перевірю існування дочірніх вузлів, потім за допомогою властивості nodeType визначаю, чи є серед них вузли-елементи.

Додавання і видалення дочірніх елементів

Є техніка, які можна використовувати для додавання і видалення елементів з DOM. Найбільш відома з них заснована на поєднанні методів createElement () і appendChild ().

Var myEl \u003d document.createElement ( "div"); document.body.appendChild (myEl);

В даному випадку я створюю

Pre