1. Створення ефекту зміни зображення

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

2. Додавання та видалення елементів

Можливо, вам не доводилося раніше використовувати тег TBODY. Багато браузерів автоматично додають цей тег у DOM, не повідомляючи про це. Якщо потрібно змінити вміст таблиці, то насправді необхідно змінити вміст TBODY. Щоб уникнути можливих непорозумінь, ми просто додали тег TBODY, щоб кожен міг би його бачити. Все це може бути досить складним, але тут дуже мало нового матеріалу.

Насамперед тут є нова функція: document.createElement. Функція createElement створює елемент, що задається аргументом.

Можна побачити, що у рядках сценарію з 5 до 10 створюється кілька елементів. Насправді створюється новий рядок TR, який вставляється в таблицю рядків 37-46. В результаті новий рядок TR буде виглядати так:

Іншими словами, ми створили 7 елементів: 1 TR, 3 TD, 2 INPUT та 1 IMG. Тег IMG буде використовуватись як зображення кнопки "Видалити". Оскільки користувач повинен завжди бачити принаймні 1 рядок введення, перший рядок видалити неможливо. Тому в 12 рядку сценарію перевіряється, що створюється перший рядок. Якщо рядок не перший, то додається зображення.

Після створення всіх цих елементів залишається насправді помістити їх у документ. Кожен елемент на сторінці має вбудовану функцію "appendChild", яку можна використовувати для додавання до цього елемента нащадка. Коли додається нащадок, він додається як останній елемент, тому якщо таблиця вже має як нащадків 10 тегів TR ідодається ще один, то він буде доданий як 11-й тег TR. Ми починаємо з отримання посилання таблицю (рядок 3). Потім ми додаємо TR до цієї таблиці (рядок 24) і потім додаємо 3 TD (рядки 25-27). Другий та третій TD містять поле введення, тому ми додаємо ці поля введення (28-29).

От і все! Тепер ми маємо новий елемент TR, і він знаходиться на сторінці. Залишилося пояснити ще кілька моментів. Щоб форму було оброблено правильно, всі поля введення повинні мати різні імена. Тому ми задаємо ім'я двох полів уведення на основі лічильника (21-22), а потім збільшуємо лічильник (31). Це робиться за допомогою ще однієї нової функції setAttribute, яка має два параметри: ім'я атрибута та значення атрибута. Існує додаткова функція getAttribute, яка має лише один аргумент: ім'я атрибута, значення якого треба отримати.

element.setAttribute("name", "elementName") по суті те саме, що element.name="elementName"

Однак завдання атрибуту безпосередньо, як у попередньому прикладі, може іноді викликати деякі проблеми для різних браузерів або деяких специфічних атрибутів. Тому хоча будь-який метод зазвичай буде працювати, кращим є перший метод, що використовує setAttribute.

Необхідно також подбати про кнопку видалення. Ми вже знаємо, що кнопка видалення першого рядка полів не створюється, але необхідно змусити її працювати для всіх інших. Це робиться у рядках коду 15-16. Тут до зображення додана функція onclick, яка викликає функцію removeContact, передаючи елемент TR як єдиний аргумент.

Тому tr.parentNode повертає посилання елемент TABLE над TR. Потім викликається функція removeChild на цьому елементі TABLE, яка просто видаляє у предкавказаного нащадка.

Поглянувши ще раз на рядок 34, тепер можна побачити, що вона просто говорить: "Видалити елемент TR у його предка" або ще простіше "Видалити елемент TR".

3. Елементи нащадки

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

Можна також використовувати атрибути firstChild та lastChild на будь-якому елементі, щоб отримати посилання на перший або останній елемент.

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

При розгляді цього невеликого фрагмента коду мало потрібно пояснювати, як можна отримати цей цікавий невеликий ефект. Код починається з одержання посилання на перший елемент TR у таблиці за допомогою методу firstChild.

Потім кожен TR розфарбовується по черзі двома різними кольорами, використовуючи tr.style. Колір фону задається одним із двох кольорів із масиву colors. Якщо counter має парне значення, колір фону задається як color1. Інакше він задається як color2. Це реалізується за допомогою оператора поділу за модулем (%). Для тих, хто забув, нагадаємо, що операція обчислює залишок під час поділу. 5/2 = 2 із залишком 1. Тому 5 % 2 (5 за модулем 2) = 1.

Тут не буде обговорюватися в даний момент зміна стилів, але достатньо сказати, що element.style надає доступ до всього, що можна встановити за допомогою таблиці стилів. Якщо потрібно, наприклад, задати стиль елемента, можна прочитати/записати весь стиль за допомогою element.style.cssText.

З метою розгляду оператора childNodes і функції getElementsByTagName перепишемо наведений приклад трохи інакше:

Обидві ці функції роблять те саме, що й перша функціяsetColors, але написано це трохи інакше. Перша функція використовує атрибут childNodes.

Як раніше говорилося, childNodes містить масив, елементами якого є нащадки. Тому циклічно перебираємо tbody.childNodes і змінюємо колір кожного нащадка, які мають бути елементами TR.

Інша функція використовує нову функцію getElementsByTagName, яка видає масив всіх елементів із вказаним ім'ям тега.

Оскільки нам потрібні всі елементи TR, ми просто передаємо у функцію 'TR' і отримуємо список всіх елементів TR у таблиці. Після цього код майже ідентичний попередньої функції.