
- •DHTML (динамический HTML) – это набор средств, которые позволяют создавать более интерактивные Web-страницы
- •Для достижения перечисленных целей используются следующие методы:
- •Все эти явно разнородные методы покоятся, в действительности, на двух китах. Первым из
- •DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM
- •DOM-модель — это внутреннее представление HTML-страницы в виде дерева. Все элементы страницы, включая
- •DOM — это модель HTML- и XML-документов, независимая от платформы и языка программирования,
- •На сегодняшний день W3C стандартизовал DOM 3-х уровней
- •Document
- •Объект document существует в единственном экземпляре для всего HTML-документа. Он присутствует всегда, если
- •Свойства объекта Document
- •DOM 2 HTML
- •Интерфейс HTMLDocument
- •Методы интерфейса HTMLDocument
- •HTML-элемент: интерфейс
- •Метод
- •Свойства интерфейса HTMLElement
- •При открытии любого HTML документа браузер предварительно производит разбор его содержимого и на
- •В DOM используется следующая терминология:
- •1. Все прямоугольники изображенные на картинке являются объектами (или узлами).
- •Корнем этого дерева является элемент HTML, который имеет двух детей — HEAD и
- •Каждый элемент данного дерева соответствует элементу HTML и, следовательно, имеет тег(и), содержимое и
- •Отношения между узлами
- •1.Все дочерние элементы, включая текстовые находятся в массиве childNodes.
- •1.Свойство parentNode указывает на родителя.
- •Обращение к элементам
- •Последовательное перемещение
- •Разберем процесс перемещения подробнее:
- •Прямое обращение к элементу
- •DOM Манипуляции
- •Полный набор констант типов узлов, определённый в спецификации W3C DOM
- •С помощью свойства innerHTML Вы можете получить доступ к содержимому текстового узла DOM
- •С помощью метода createElement() Вы можете создать элемент.
- •Добавить новый элемент к детям существующего элемента можно методом appendChild, который в DOM
- •insertBefore
- •cloneNode()
- •С помощью метода removeChild() Вы можете удалить узел потомок из элемента.
- •Быстрый способ удалить все содержимое тега - это присвоить свойству innerHTML пустую строку.
- •Для манипуляции узлами в объектной модели используются методы removeNode(), replaceNode() и swapNode().
- •Методы getAttribute (), setAttribute () и removeAttribute () позволяют, соответственно, получить и установить
- •Стандартные свойства
- •Стандартные методы
- •Таблица специальных DOM методов и свойств разных объектов
- •form
- •align alt
- •charset
- •form
- •deleteRow Удаляет строку таблицы.
- •insertRow
- •deleteCell Удаляет ячейку таблицы.
- •insertCell

align alt
border
height
hspace
<img longDes > c
name
src useMap
vspace width
Возвращает или устанавливает значение атрибута align данного элемента.
Возвращает или устанавливает значение атрибута alt данного элемента.
Возвращает или устанавливает значение атрибута border данного элемента.
Возвращает или устанавливает значение атрибута height данного элемента.
Возвращает или устанавливает значение атрибута hspace данного элемента.
Возвращает или устанавливает значение атрибута longdesc данного элемента.
Возвращает или устанавливает значение атрибута name данного элемента.
Возвращает или устанавливает значение атрибута src данного элемента.
Возвращает или устанавливает значение атрибута useMap данного элемента.
Возвращает или устанавливает значение атрибута vspace данного элемента.
Возвращает или устанавливает значение атрибута width данного элемента.
53

charset
href hreflang
media
<link
>rel
rev
target
type
Возвращает или устанавливает значение
атрибута charset данного элемента.
Возвращает или устанавливает значение
атрибута href данного элемента.
Возвращает или устанавливает значение
атрибута hreflang данного элемента.
Возвращает или устанавливает значение
атрибута media данного элемента.
Возвращает или устанавливает значение
атрибута rel данного элемента.
Возвращает или устанавливает значение атрибута rev данного элемента.
Возвращает или устанавливает значение атрибута target данного элемента.
Возвращает или устанавливает значение
атрибута type данного элемента.
54

form
index
<option
>selected
value
form
length
multiple
<select>name option
selectedInd ex
add() remove()
Позволяет обратится к форме частью которой является данный элемент.
Возвращает позицию данного элемента в выпадающем списке.
Возвращает или устанавливает значение атрибута selected данного элемента.
Возвращает или устанавливает значение атрибута value данного элемента.
Позволяет обратится к форме частью которой является данный элемент.
Возвращает количество элементов в выпадающем списке.
Возвращает или устанавливает значение атрибута multiple данного элемента.
Возвращает или устанавливает значение атрибута name данного элемента.
Возвращает массив позволяющий обратится ко всем пунктам в выпадающем списке.
Возвращает позицию (индекс) выбранного элемента списка.
Позволяет добавить элемент в выпадающий список.
Позволяет удалить элемент из выпадающего списка.
55

|
border |
Возвращает или устанавливает значение атрибута |
|
|
border данного элемента. |
||
|
|
||
|
cellPadding |
Возвращает или устанавливает значение атрибута |
|
|
cellpadding данного элемента. |
||
|
|
||
|
cells |
Возвращает массив позволяющий обратится к |
|
|
любой ячейки в строке. |
||
|
|
||
|
cellSpacing |
Возвращает или устанавливает значение атрибута |
|
|
cellspacing данного элемента. |
||
|
|
||
|
frame |
Возвращает или устанавливает значение атрибута |
|
|
frame данного элемента. |
||
|
|
||
|
rows |
Возвращает массив который позволяет обратится |
|
<table |
ко всем строкам таблицы. |
||
|
|||
|
Возвращает или устанавливает значение атрибута |
||
> |
rules |
||
rules данного элемента. |
|||
|
|
||
|
summary |
Возвращает или устанавливает значение атрибута |
|
|
summary данного элемента. |
||
|
|
||
|
width |
Возвращает или устанавливает значение атрибута |
|
|
width данного элемента. |
||
|
|
createCaption Создает табличный заголовок.
()
deleteCaption Удаляет табличный заголовок.
()
deleteRow() Позволяет удалить строку из таблицы. insertRow() Позволяет добавить строку в таблицу.
56

deleteRow Удаляет строку таблицы.
{Объект таблицы или ее секции}.deleteRow([{Индекс}]);
Метод принимает только один необязательный параметр, который задает порядковый номер ячейки в коллекции rows. В случае, если параметр не задан, удаляется последняя строка.
57

insertRow
Метод вставляет ячейку в таблицу или одну из столбцов.
{Объект строки таблицы}.insertRow([{Индекс}]); Метод принимает всего один необязательный параметр, который задает индекс только что вставленной строки в коллекции rows.
В случае, если параметр не указан, строка добавляется в конец коллекции (значение -1).
Этот метод возвращает ссылку на вставленную строку.
58

<td> cellIndex
cells
<tr> rowIndex
deleteCell()
insertCell()
Возвращает позицию ячейки в строке.
Возвращает массив позволяющий обратится ко всем ячейкам строки.
Позволяет узнать позицию данной строки в таблице.
Удаляет ячейку из таблицы.
Вставляет ячейку в таблицу.
59

deleteCell Удаляет ячейку таблицы.
{Объект строки таблицы}.deleteCell([{Индекс}]);
Метод принимает только один необязательный параметр, который задает порядковый номер ячейки в коллекции cells. В случае, если параметр не задан, удаляется последняя ячейка.
60

insertCell
Метод вставляет ячейку в строку таблицы.
{Объект строки таблицы}.insertСell([{Индекс}]); Метод принимает всего один необязательный параметр, который задает индекс только что вставленной ячейки в коллекции cells.
В случае, если параметр не указан, ячейка добавляется в конец коллекции (значение -1).
Этот метод возвращает ссылку на вставленную ячейку.
61