Конспект урока "Основные понятия объектной модели документа в JavaScript"
план-конспект урока

Тема: Основные понятия объектной модели документа.

Цель: рассмотреть объектную модель документа; способствовать развитию памяти, внимания, устной связной речи; воспитывать информационную культуру.

Оборудование: ПЭВМ, медиапроектор, наглядный материал (презентация), дидактический материал (карточки-задания).

Ход урока

1. Организационное начало.
2. Повторительно – обучающая работа.

1. Фронтальный устный опрос.

- Как создать пользовательский объект?

- Как вывести на экран конкретное свойство?

- для чего используется оператор with?

2. Подведение итогов этапа.

3. Работа по осмыслению и усвоению нового материала.

1. Сообщение темы и цели урока.

Основные понятия языка JavaScript

• Объект – совокупность свойств, методов, коллекций и событий, предоставляемых браузером в рамках объектной модели .

•Свойство – переменная в рамках объекта, используемая для получения значения или установки нового.

• Коллекция – упорядоченный набор свойств.

•Метод – функция, предоставляемая объектом для выполнения каких-либо действий .

•Событие – какое-либо действие пользователя или момент работы браузера (для реакции на события создаются обработчики событий) .

Пример из жизни: 
• свойства – это то, что объект знает( имя, цвет глаз, таблица умножения ),
• методы – это то, что объект умеет( спать, есть, строить).

Объект window находится на самом верхнем уровне иерархии, он имеет свои собственные свойства и методы, а также содержит несколько объектов, важнейшим из которых является document. Последний, в отличие от других, стандартизирован W3C.

Объект frames представляет коллекцию (массив) фреймов. Каждый фрейм является подокном главного окна браузера и как объект устроен аналогично window.

В частности, он может содержать объект document, соответствующий загруженному в него документу.

Объект history содержит список последних URL-адресов, к которым обращался пользователь. Данный объект представляет собой то, что называют журналом браузера.

Объект location содержит сведения об URL-адресе загруженного в браузер документа.

В объекте navigator находится информация об основных характеристиках браузера, в том числе о его типе и версии.

Объект document содержит информацию об элементах загруженного в него документа, таких как ссылки, графические изображения, фрагменты текста и др.

Сам по себе язык JavaScript не предусматривает работы с браузером. Он вообще не знает про HTML. Но позволяет легко расширять себя новыми функциями и объектами. На рисунке ниже схематически отображена структура, которая получается, если глобально посмотреть на совокупность браузерных объектов.

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов. Согласно DOM-модели, документ является иерархией, деревом.

Объектная модель документа (Document Object Model, DOM) – представление документа в виде дерева тегов, доступное для изменения через JavaScript.

Каждый документ содержит элементы, представляемые узлами, всего существует 12 типов узлов, основных узлов два: каждый HTML-тег образует отдельный элемент-узел (ELEMENT_NODE = 1), каждый фрагмент текста – текстовый узел (TEXT_NODE = 3) .

Возможности DOM

• Обеспечивает доступ ко всем элементам документа и их атрибутам посредством древовидной структуры объектов
• Позволяет создавать, удалять и изменять элементы документа и их содержимое.
• Все элементы страницы, включая теги, текст, комментарии, являются узлами DOM.
• У элементов DOM есть свойства и методы, которые позволяют изменять их.

Построим дерево DOM для следующего документа:

Html-код:

       

        Правда о лосях.

           

1.                 Лось - животное хитрое

              

           

2.                 .. И коварное

              

       

Корневым элементом иерархии является html. У него есть два потомка: первый – head, второй – body. И так далее, каждый вложенный тег является потомком тега выше:

В этом дереве имеется два типа узлов.

1. Теги образуют узлы-элементы (element node) DOM-дерева. Естественным образом одни узлы вложены в другие.
2. Текст внутри элементов образует текстовые узлы. Текстовый узел содержит исключительно строку текста и не может иметь потомков.

Основное назначение JavaScript - это работа с элементами страницы. Используя объектную модель документа, можно обратиться к любому элементу страницы.

Встроенные свойства и методы объекта document позволяют найти любой элемент на странице и произвести с ним необходимые действия. Например, у каждого элемента есть свойство style, которое позволяет изменять CSS-стили элемента.

Элементы верхнего уровня

К элементам верхнего уровня можно обратиться напрямую, используя свойства объекта document:

• document.documentElement - для обращения к элементу .
• document.head - для обращения к элементу .
• document.body - для обращения к элементу .

Например, с помощью JS и DOM изменим цвет фона веб-страницы:

 

К элементу страницы нельзя обратиться раньше, чем он отобразится в браузере. Выполнение скрипта должно начинаться только после вывода изменяемого элемента на экран. DOM-структура документа создаётся по мере вывода страницы на экран. Если элемент ещё не отображён в браузере, значит его нету в дереве DOM. Соответственно, к такому элементу нельзя обратиться.

Узлы DOM

Узлы DOM-дерева могут сильно отличаться друг от друга. Узлы разных типов имеют различные свойства. Следовательно, прежде, чем начать работу с конкретным узлом, может потребоваться получить информацию о нём. В DOM-интерфейсе имеется несколько общих свойств для всех узлов, которые представляют информацию о текущем узле.

Узлы DOM-дерева бывают разных типов. Всего существует 12 типов узлов, но на практике работать необходимо только с несколькими:

• узлы-элементы (html-теги);
• текстовые узлы (фрагменты текста);
• комментарии.

1. Свойство nodeType -  тип узла. В частности:1 - для элементов;3 - для текстовых узлов;8 - для комментариев. Чтобы узнать тип узла, можно выполнить проверку принадлежности к соответствующему классу с помощью оператора instanceof:

var par = document.body.children[2];

alert(par.nodeType=='3' ); /* true */

2. nodeName - содержит имя узла, для тегов - это имя тега в верхнем регистре, для текстовых узлов и комментариев - тип узла:

 

Параграф

3. tagName - содержит имя тега в верхнем регистре, для текстовых узлов и комментариев данное свойство выдаёт undefined.

Методы поиска элементов

Для обращения к любому элементу страницы в DOM интерфейсе введены специальные поисковые методы. Поиск может осуществляться по разным параметрам элементов, поэтому с помощью них можно найти любой элемент.

1) document.getElementById(идентификатор) -  метод , который выполняет поиск элемента по его уникальному (т.е. неповторяющемуся) идентификатору id.

Пример. Создать 2 абзаца текста, поменять заливку для текста с указанным идентификатором.

 

Текст абзаца1.

Текст абзаца 2

2) document.getElementsByName(имя) – метод, который выполняет поиск по всем элементам страницы с заданным атрибутом name, возвращает список всех элементов, чей атрибут name удовлетворяет запросу.

 

Lorem ipsum dolor...

Deleniti sit veniam...

Результирующий список автоматически обновляется при изменении содержимого страницы.

element.getElementsByTagName(тег) -  поиск по тегу. При его вызове поиск ведётся внутри данного элемента. Метод возвращает список всех элементов, удовлетворяющих запросу.

element.getElementsByClassName(класс) Данный метод выполняет поиск по глобальному атрибуту class. При его вызове поиск ведётся внутри данного элемента. Метод возвращает список всех элементов с указанным классом.

element.querySelectorAll(селектор) Метод возвращает список всех элементов, удовлетворяющих заданному CSS-селектору. При его вызове поиск ведётся внутри данного элемента.

element.querySelector(селектор) Метод возвращает первый элемент, удовлетворяющий заданному CSS-селектору. При его вызове поиск ведётся внутри данного элемента.

element.closest(селектор) Как и querySelector(), метод возвращает первый элемент, удовлетворяющий заданному CSS-селектору. Но поиск ведётся не внутри данного элемента, а наоборот - вверх по иерархии DOM. При этом сам элемент, на котором вызван метод, тоже участвует в проверке.

Подробная информация тут: http://webgent.ru/javascript/dom-reference

Обращение к родственным узлам

Встроенные методы поиска используются для непосредственного обращения к элементам страницы. Но бывают случаи, когда к элементу нельзя обратиться напрямую (например, если на момент написания скрипта сам элемент не определён однозначно). В таких случаях можно воспользоваться внутренними свойствами узлов дерева, которые содержат ссылки на родственные узлы.

1) Свойство parentNode / parentElement обращение к родительскому узлу/элементу.

Например,  document.body.parentNode); /* HTML элемент */

2) childNodes [index] / children [index] обращение к дочернему узлу/ элементу с конкретным номером, т.е. индексом, которые присутствуют в дереве DOM на момент выполнения скрипта.

 firstChild / firstElementChild - первый элемент из списка дочерних узлов или элементов.

lastChild / lastElementChild -  последний элемент дочерних узлов или элементов

element.firstChild === element.childNodes[0];

element.lastChild === element.childNodes[element.childNodes.length - 1];

3. previousSibling / previousElementSibling  - обращение к предыдущему сестринскому узлу\элементу внутри общего родителя.
4. nextSibling / nextElementSibling - обращение к последующему сестринскому узлу\элементу внутри общего родителя.

Пример. Создать нумерованный список с тремя элементами списка. Определить родственные узлы-элементы для тега нумерованного списка.

Заменить второй элемент списка на четвертый.

Нумерованный список

1. Первый
2. Второй
3. Третий

Документ

Свойства для добавления и удаления узлов

- createElement() создание нового узла-элемента

–createTextNode() создание нового узла-текста

–appendChild() добавление узла в конец коллекции дочернего узла, для которого метод был вызван

–insertBefore() добавление узла с возможностью указания места, куда вставляется новый узел

–removeChild() удаление потомка узла, для которого метод был вызван

–removeNode() удаление узла из документа

Пример. Получить список:

Удалить второй элемент

Нумерованный список

1. Первый
2. Второй
3. Третий

4. Итог урока.

1. Фронтальная (обобщающая ) беседа.

- Что представляет собой объектная модель документа?

- Как обратиться к объектам верхнего уровня?

- Какие узлы используются в DOM?

- Какие методы поиска элементов вы знаете?

- Как обратиться к узлам через родственные связи?

- Назовите свойства для добавления и удаления узлов.

5. Задавание на дом.

Выучить опорный конспект,  Дунаев, с.463-480 (выборочно)