САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

JS Учебник

JS Главная JS Введение JS Установка JS Вывод JS Синтаксис JS Заявления JS Комментарии JS Переменные JS Операторы JS Арифметика JS Присваивания JS Типы данных JS Функции JS Объекты JS Область JS События JS Строки JS Методы строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Даты JS Формат даты JS Метод получения дат JS Методы набора... JS Математические... JS Случайные числа JS Булевы JS Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Отладчик JS Подъемный JS Строгий JS Ключевое слово this JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

Определение объекта Свойства объекта Методы объекта Доступ к объекту Конструкторы объекта Прототипы объекта Объект ECMAScript 5

JS Функции

Определение функции Параметры функции Вызов Функции Вызвать Функцию Применение функции Закрытие Функции

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Слушатель события DOM Навигация DOM Узлы DOM Коллекции DOM Список узлов

JS Браузера BOM

JS Окно JS Экран JS Местоположение JS История JS Навигатор JS Всплывающее окна JS Синхронизация JS Cookies

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос AJAX Ответ AJAX XML Файл AJAX PHP AJAX ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP



JavaScript HTML DOM



С помощью HTML DOM JavaScript может получить доступ и изменить все элементы HTML документа.


HTML DOM (объектная модель документа)

При загрузке веб-страницы браузер создает Document Object Model страницы.

Модели HTML DOM - это построенный в виде дерева объектов:

HTML DOM дерево объектов

DOM HTML tree

С помощью объектной модели JavaScript получает всю необходимую мощность для создания динамического HTML:

  • JavaScript может изменять все элементы HTML на странице
  • JavaScript может изменить все атрибуты HTML на странице
  • JavaScript может изменять все стили CSS на странице
  • JavaScript может удалять существующие HTML элементы и атрибуты
  • JavaScript может добавлять новые HTML элементы и атрибуты
  • JavaScript может реагировать на все существующие события HTML на странице
  • JavaScript может создавать новые события HTML на странице

Чему вы научитесь

В следующих главах этого урока вы узнаете:

  • Как изменить содержимое HTML элементов
  • Как изменить стиль (CSS) HTML элементов
  • Как реагировать на события HTML DOM
  • Как добавлять и удалять HTML элементы

Что такое DOM?

DOM-это стандарт W3C (Консорциум Всемирной Паутины).

DOM определяет стандарт доступа к документам:

"Объектная модель документа W3C (DOM) - это платформа и языковой нейтральный интерфейс, который позволяет программам и скриптам динамически получать доступ и обновлять содержимое, структуру и стиль документа."

Стандарт W3C DOM разделен на 3 различные части:

  • Core DOM - стандартная модель для всех типов документов
  • XML DOM - стандартная модель для XML документов
  • HTML DOM - стандартная модель для HTML документов

Что такое HTML DOM?

HTML DOM - это стандартная объектная модель и программный интерфейс для HTML. Он определяет:

  • HTML элементы как объекты
  • Свойства из всех HTML элементов
  • Методы для доступа ко всем элементам HTML
  • События для всех HTML-элементов

Иначе говоря: HTML DOM - это стандарт для получения, изменения, добавления или удаления HTML элементов.