Зміна сторінки за допомогою DOM

Розглянемо основні способи змінювати DOM, спочатку - загалом, потім - конкретному прикладі із життя.

Створення та додавання елементів

Щоб створити новий елемент, використовується метод document.createElement(тип) .

Додавання до DOM

Додати новий елемент до дітей існуючого елемента можна методом appendChild , який у DOM є у будь-якого тега.

Код із наступного прикладу додає нові елементи до списку:

Метод appendChild завжди додає елемент останнім до списку дітей.

Додавання до конкретного місця

Новий елемент можна додати не в кінці дітей, а перед потрібним елементом. Для цього використовується метод insertBefore батьківського елемента.

Він працює так само, як і appendChild, але приймає другим параметром елемент, перед яким потрібно вставляти.

Наприклад, у тому списку додамо елементи перед першим li .

Метод insertBefore дозволяє вставляти елемент у будь-яке місце, крім кінець. А з цим справляється appendChild. Отже, ці методи доповнюють один одного.

Метод insertAfter немає, але потрібну функцію легко написати на основі комбінації insertBefore і appendChild .

Видалення вузла DOM

Щоб усунути вузол з документа - достатньо викликати метод переміщеннядіти з його батька.

Якщо батька немає " на руках " , зазвичай використовують parentNode . Виходить так:

Незграбно, але працює.

Приклад - показ повідомлення

Зробимо щось складніше.

Як реальний приклад розглянемо додавання повідомлення на сторінку. Щоб показувалося посередині екрана і було красивіше, ніж звичайний alert.

Повідомлення в HTML-варіанті (як завжди можна подивитися, натиснувши кнопку):

Як видно - повідомлення вкладено уDIV фіксованого розміру my-message і складається із заголовка my-message-title, тіла my-message-body та кнопки OK, яка потрібна, щоб повідомлення закрити.

Крім того, додано трохи простих стилів, щоб якось виглядало.

Показ повідомлення складається з кількох етапів.

  1. Створення DOM-елементів для показу повідомлення
  2. Позиціювання на екрані
  3. Запуск функції видалення повідомлення на кліку на ОК

Для створення складних структур DOM, як правило, використовують або готові шаблони і метод cloneNode , що створює копію вузла, або властивість innerHTML .

Наступна функція створює повідомлення із зазначеним тілом та заголовком.

Як видно, вона робить досить хитро. Щоб створити елемент за текстовим шаблоном, спочатку створює тимчасовий елемент (1), а потім записує (2) його як innerHTML тимчасового елемента (1). Тепер готовий елемент можна отримати та повернути (3).

Позиціювання

Повідомлення будемо позиціонувати абсолютно, в центрі за шириною та на 200 пікселів нижче верхньої межі екрану.

Не вдаючись у тонкощі позиціонування - зауважимо, що для якості top 200 пікселів додаються до поточної вертикальної прокрутки, яку браузер відраховує або від documentElement або body - залежить від DOCTYPE і типу браузера.

При встановленні left від центру екрана віднімається половина ширини DIV'а з повідомленням (у нього стоїть width:300).

Нарешті, наступна функція вішає на кнопку OK функцію, що видаляє елемент із повідомленням із DOM.

Зверніть увагу, що при отриманні елемента функції не використовують DOM-властивості previousSibling/nextSibling .

Тому є дві причини. Перша – надійність. Ми можемо змінити шаблон повідомлення, вставити додатковий елемент - танічого не повинно зламатися. Друга – це наявність текстових елементів. Властивості previousSibling/nextSibling будуть перераховувати їх нарівні з іншими елементами і доведеться їх відфільтровувати.

Створимо одну функцію, яка виконує всі необхідні показу повідомлення операції.

Протестувати те, що вийшло нам допоможе наступна кнопка:

Для цього прикладу ви можете:

Ви освоїли основні способи зміни DOM, включаючи:

  • Створення елементів
  • Вставку елементів у DOM
  • Видалення елементів

Крім того, переглянули, як це працює, на реальному прикладі.