- •Современные веб-страницы
- •Что собой представляет документ?
- •А что если представить документ так?
- •Стандарт DOM позволяет рассматривать документ как набор объектов, формирующих определенную структуру
- •DOM-дерево
- •Структура документа
- •Виды связей между узлами
- •Правила
- •Пример
- •Пример
- •Обращение к элементу по его идентификатору
- •Обращение к элементам одного типа
- •Обращение к элементам с одинаковым классом
- •Пример
- •Основные свойства узлов
- •Основные свойства узлов
- •Основные свойства узлов
Пример
<html>
<head>
<title>
Моя страница
</title>
</head>
<body>
<h1>
Заголовок 1
</h1>
<p>
Привет!
</p>
</body>
</html>
<html> - корневой узел. Является родителем узлов <head> и <body>.
Узлы <head> и <body> являются «братьями» (siblings) друг для друга и дочерними узлами для <html>.
Узел <title> является единственным дочерним элементом для узла <head>. Узел <head> является родителем узла <title>.
Узлы <h1> и <p> являются «братьями» (siblings) друг для друга и дочерними узлами для <body>.
Пример
<html>
<head>
<title>
Моя страница
</title>
</head>
<body>
<h1>
Заголовок 1
</h1>
<p>
Привет!
</p>
</body>
</html>
Текстовый узел «Моя страница» является дочерним для узла <title>.
Текстовый узел «Заголовок 1» является дочерним для узла <h1>.
Текстовый узел «Привет!» является дочерним для узла <p>.
Текстовые узлы «Заголовок 1» и «Привет!» НЕ ЯВЛЯЕЮТСЯ «братьями» (siblings), т.к. у них не один родитель.
DOM+JavaScript
•В JavaScript доступ к объектной модели документа можно получить через объект document
Обращение к элементу по его идентификатору
Метод getElementById(id) объекта document возвращает один объект, описывающий элемент (узел) с переданным в метод идентификатором.
var mainBlock = document.getElementById(“main”);
…
<div id=“main”>…</div>
Обращение к элементам одного типа
Метод getElementsByTagName(tagName) возвращает объекты, описывающие ВСЕ теги с переданным в метод названием
var links = document.getElementsByTagName(“a”);
Обращение к элементам с одинаковым классом
Метод getElementsByClassName(tagName) возвращает объекты, описывающие ВСЕ элементы с переданным в метод названием класса
var redElements = document.getElementsByClassName(“redElement”);
Пример
//получаем главный блок по его id
var mainBlock = document.getElementById(“main”);
//получаем все ссылки внутри главного блока
var linksInsideMain = mainBlock.getElementsByTagName(“a”);
//получаем все ссылки на странице
var allLinks = document.getElementsByTagName(“a”);
Основные свойства узлов
Каждый узел обладает свойством nodeName, которое доступно только для чтения и содержит:
•Название тега (для узлов-элементов)
•Название атрибута (для узлов-атрибутов)
•«#text» (для текстовых узлов)
•«#document» (для узла-документа)
Основные свойства узлов
Каждый узел обладает свойством nodeValue, которое содержит:
•undefined (для узлов-элементов)
•Для текстовых узлов – сам текст
•Значение атрибута (для узла-атрибута)
Основные свойства узлов
Каждый элемент обладает свойством innerHTML, которое позволяет получать и изменять его содержимое (в виде строки)
<html>
<body>
<p id="p1">A</p> <script>
var p = document.getElementById("p1"); alert(p.innerHTML);
p.innerHTML=“B";
</script>
</body>
</html>