DOM - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему DOM. Доклад-сообщение содержит 21 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

DOM

Слайд 2

Описание слайда:

Современные веб-страницы Элементы страницы могут динамически Изменяться Добавляться Удаляться

Слайд 3

Описание слайда:

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

Слайд 4

Описание слайда:

А что если представить документ так?

Слайд 5

Описание слайда:

W3C DOM DOM (Document Object Model) – объектная модель документа Независимый от платформы или языка интерфейс, позволяющий программам динамически обращаться к содержимому и структуре документа, а также изменять его

Слайд 6

Описание слайда:

Стандарт DOM позволяет рассматривать документ как набор объектов, формирующих определенную структуру

Слайд 7

Описание слайда:

Слайд 8

Описание слайда:

DOM-дерево

Слайд 9

Описание слайда:

Структура документа Основная структурная единица дерева документа – узел (node). Узлами являются: Документ (document node) Любой HTML-элемент (element node) Текст внутри тега (text node) Любой атрибут тега (attribute node) Комментарий (comment node)

Слайд 10

Описание слайда:

Виды связей между узлами

Слайд 11

Описание слайда:

Правила Каждый узел имеет строго одного родителя (кроме узла документа) Узел может иметь любое количество дочерних узлов (0 и более) «Братья» (siblings) – дочерние узлы одного родителя

Слайд 12

Описание слайда:

Пример Моя страница Заголовок 1 Привет!

Слайд 13

Описание слайда:

Пример Моя страница Заголовок 1 Привет!

Слайд 14

Описание слайда:

DOM+JavaScript В JavaScript доступ к объектной модели документа можно получить через объект document

Слайд 15

Описание слайда:

Обращение к элементу по его идентификатору Метод getElementById(id) объекта document возвращает один объект, описывающий элемент (узел) с переданным в метод идентификатором. var mainBlock = document.getElementById(“main”); … …

Слайд 16

Описание слайда:

Обращение к элементам одного типа Метод getElementsByTagName(tagName) возвращает объекты, описывающие ВСЕ теги с переданным в метод названием var links = document.getElementsByTagName(“a”);

Слайд 17

Описание слайда:

Обращение к элементам с одинаковым классом Метод getElementsByClassName(tagName) возвращает объекты, описывающие ВСЕ элементы с переданным в метод названием класса var redElements = document.getElementsByClassName(“redElement”);

Слайд 18

Описание слайда:

Пример //получаем главный блок по его id var mainBlock = document.getElementById(“main”); //получаем все ссылки внутри главного блока var linksInsideMain = mainBlock.getElementsByTagName(“a”); //получаем все ссылки на странице var allLinks = document.getElementsByTagName(“a”);

Слайд 19

Описание слайда:

Основные свойства узлов Каждый узел обладает свойством nodeName, которое доступно только для чтения и содержит: Название тега (для узлов-элементов) Название атрибута (для узлов-атрибутов) «#text» (для текстовых узлов) «#document» (для узла-документа)

Слайд 20

Описание слайда:

Основные свойства узлов Каждый узел обладает свойством nodeValue, которое содержит: undefined (для узлов-элементов) Для текстовых узлов – сам текст Значение атрибута (для узла-атрибута)

Слайд 21

Описание слайда:

Основные свойства узлов Каждый элемент обладает свойством innerHTML, которое позволяет получать и изменять его содержимое (в виде строки) A var p = document.getElementById("p1"); alert(p.innerHTML); p.innerHTML=“B";

Теги

Похожие презентации