Ця стаття познайомить вас зі скелетом документа, з яким працює JavaScript. Маючи практичні знання про цю абстрактну об'єктну модель документа, ви можете написати JavaScript що працює на будь-якій веб-сторінці.
Введення
Як веб-сторінки та JavaScript працюють разом і як вони можуть спілкуватися один з одним? Відповіді полягають у розумінні того, як працює об'єктна модель документа.
Мета DOM
DOM організовує зміст веб-сторінки та надає дорожню карту. Модель складається з вузлів. Вузли організовані в ієрархію, яку найкраще розглядати як деревовидну структуру. Ми повинні бути в змозі взяти будь-який HTML і представити його таким чином.
Наприклад, текст цього абзацу є вузлом об'єктної моделі документа. Абзац є іншим вузлом та батьківським вузлом для текстового вузла. Сам документ зрештою є батьківським вузлом для них обох.
Ми можемо написати JavaScript, щоб діяти на веб-сторінці, ідентифікуючи вузли. Оскільки кожен фрагмент контенту є вузлом, ми можемо написати JavaScript, який має відношення до будь-якого об'єкта, який ми хочемо змінити. Ви помітите, що це схоже на те, як працює CSS працюють: він застосовує стиль або візуальний зовнішній вигляд до контенту, використовуючи атрибути id і class HTML-елементів, так само як JavaScript контролює поведінку.
Важливо зазначити, що CSS і JavaScript знаходяться не в DOM, а поза ним. Вони обидва маніпулюють вмістом DOM, а не населяють його.
Повторне використання коду
Чому початковий код для веб-сторінок керується таким чином? Є дві основні причини:
- Зберігання JavaScript в окремих файлах спрощує повторне використання коду. Коли JavaScript написаний вбудованим, поруч з контентом, з яким він пов'язаний, його необхідно скопіювати, щоб та ж функціональність з'явилася в іншому місці.
- JavaScript, розділений на зовнішній файл, робить початковий код більш читабельним, видаляючи функціональність веб-сторінки (JavaScript) з вмісту (HTML).
Вузли DOM
Вузли, які ви створюєте і контролюєте, обмежені тим, що підтримують специфікація HTML і браузери. Це одна з причин того, що введення HTML5 нових елементів верхнього рівня було важливим.
Для наших цілей найбільш важливими типами вузлів є:
- Елемент
- атрибут
- Текст
Хоча в специфікації насправді перераховано дванадцять всього.
Використання скрипту для створення вузлів у DOM
З метою простої демонстрації ми збираємося використовувати JavaScript для створення одного конкретного елемента.
Тут ми покажемо вам, наскільки потужний JS, використовуючи його для створення одного з найбільш фундаментальних і поширених веб-об'єктів веб-сайту - заголовка.
Щоб наслідувати цей приклад, створення всього віртуального сервера не варте зусиль, тож використовуйте онлайн-пісочницю. Ви будете хотіти легкий дитячий майданчик, щоб експериментувати з як JSBin. JSBin чудовий, тому що він мультипанельний і включає в себе спосіб бачити і маніпулювати всім: HTML, JS, CSS та попередній перегляд веб-сторінки одночасно.
(Codepen аналогічний, і для цього прикладу буде працювати так само добре.)
JSBin також може динамічно створювати URL-адреси для вашого блокнота JS, якими можна поділитися пізніше. Ось той, який я згенерував для цього прикладу.
Я відтворив і прокоментував такі фрагменти для створення нового заголовка H1 в тілі:
- Фрагмент HTML:
- Фрагмент JavaScript
//declare a new variable to hold a new h1 element var newHeading = document.createElement(""h1""); //add the text node to the document var h1Text = document.createTextNode(""Heading Level 1""); //make it a child node of the new heading newHeading.appendChild(h1Text); //append this as a child of element defined as ""bt"" document.getElementById(""bt"").appendChild(newHeading);
Створює новий елемент H1 та його вміст безпосередньо підлеглий тегові < body >.
Зауважте, що початковий HTML-код у лівій панелі не змінюється. Цей код досить легко читається в цьому прикладі. У просунутому Javascript все може стати набагато складніше.
Трохи про лексичну структуру JavaScript
Наведений фрагмент має невелике пояснення.
- var створює змінну, в якій зберігається довільне значення для вашого коду.
- = є оператором присвоювання. Тут він працює з терміном var і назвою нової змінної (наприклад, археолог Heading), щоб сформувати повне оголошення.
- method - це виклик, який використовує синтаксис «точка» для відділення об'єктів, таких як document, від методів, що використовуються для них, як у getElementById.
- Поняття «об'єкти» в програмуванні. заслуговує великого обговорення і виходить за рамки цієї статті. Досить сказати, що вони є важливими компонентами вашої програми.
- Методи - це те, що ви очікуєте: певна процедура або запланована дія, яку можна застосувати до об'єктів.
Ми, безумовно, надали вам безліч відмінних ресурсів для вивчення JavaScript. Зверніться до нашого розділу програмування, щоб дізнатися більше.
Що далі
JQuery . Це важлива основа для новітньої ітерації багатих веб-сторінок і додатків, і саме тут ви можете почати далі.