Используя объектную модель документа от JavaScript

Объектная модель документа JavaScript реализует спецификацию Объектной модели документа (DOM), разработанную Консорциумом World Wide Web. Эта спецификация обеспечивает платформу и нейтральный языком интерфейс, позволяющий программам и сценариям динамично получать доступ и изменять содержание, структуру и стиль документа — обычно HTML или XML — путем обеспечения структурированного набора объектов, соответствующих элементам документа.

Уровень 2 спецификация DOM в частности добавил возможность создать деревья объектов из таблиц стилей и управлять данными стиля элементов документа.

Объектная модель документа уже реализована в большом разнообразии языков, прежде всего JavaScript. Каждое объявление в JavaScript DOM создавалось с помощью файлов Языка определения интерфейсов (IDL) из W3C.

Путем использования в своих интересах DOM Вы можете:

Доступ к структуре документа с DOM

Первичная функция Объектной модели документа должна просмотреть, получить доступ и изменить структуру документа HTML, отдельного от содержания, содержавшего в нем. Можно получить доступ к определенным элементам HTML на основе их id идентификатор, или выделяют массивы элементов их тегом или типом класса CSS. Все трансформации сделаны согласно новой спецификации HTML. Что еще более важно они происходят динамично — любая трансформация произойдет, не перезагружая страницу.

Дерево DOM полностью состоит из объектов JavaScript. Некоторые фундаментальные и обычно используемые перечислены в Таблице 1.

Таблица 1  Обычно использовала JavaScript типы DOM

Объект DOM

Определение

document

Возвращает объект документа для страницы. Представляет корневой узел дерева DOM, и действия с ним будут влиять на полноту страницы.

element

Представляет экземпляр большинства структур и подструктур в дереве DOM. Например, текстовый блок может быть элементом, и все - также body раздел документа HTML.

nodeList

A nodeList эквивалентно массиву, но это - массив, определенный для хранения элементов. Можно получить доступ к элементам в nodeList через общий синтаксис как myList[n], где n целое число.

Существует много методов JavaScript, указанных DOM, позволяющим Вам получать доступ к его структуре. Некоторые фундаментальные и обычно используемые перечислены в Таблице 2.

Таблица 2  Обычно использовала JavaScript методы DOM

Метод DOM

Родительский класс (ы)

Определение

element getElementById(ID)

документ, элемент

Возвращает элемент, однозначно определенный id идентификатор.

nodeList getElementsByTagName(имя)

документ, элемент

Возвраты a nodeList из любых элементов, имеющих данный тег (такой как p или div), указанный по имени.

element createElement(ввести)

элемент

Создает элемент с типом, указанным типом (такой как p или div)

void appendChild(узел)

элемент, узел

Добавляет узел, указанный узлом на узел получения или элемент.

string style

элемент

Возвращает правила стиля, связанные с элементом, в строковой форме. Можно также использовать это для установки правил стиля путем вызова чего-то как div.style.margin = “10px”;

string innerHTML

элемент

Возвращает HTML, содержащий элемент тока и все содержание в нем. Можно также использовать это для установки innerHTML элемента, при помощи чего-то как element.innerHTML = “<p>test</p>”;

void setAttribute(имя, значение)

элемент

Добавляет (или изменения) атрибут элемента получения, такие как id или align атрибут.

string getAttribute(имя)

элемент

Возвращает значение атрибута элемента, указанного по имени.

Вся ссылка DOM может быть найдена в Других Ресурсах.

Используя объектную модель документа

Этот раздел представляет некоторые примеры кода для ознакомления Вас с Объектной моделью документа.

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

<html>
<head>
    <title>My Sample HTML file</title>
    <script language="javascript" type="text/javascript"><!--
        // Insert JavaScript
        // commands here.
 
        // Do not delete this comment. -->
    </script>
</head>
<body>
 <div id=”allMyParas” style=”border-top: 1px #000 solid;”>
    <p id=”firstParagraph”>
        This is my first paragraph.
    </p>
    <p id=”secondParagraph”>
        This is my second paragraph.
    </p>
 </div>
</body>
</html>

Теперь, когда у Вас есть документ HTML для работы с, Вы готовы добавить некоторые трансформации DOM в область сценария. Этот первый пример добавляет абзац к дереву DOM, после firstParagraph и secondParagraph элементы:

var parasDiv = document.getElementById(“allMyParas”);
var thirdPara = document.createElement(“p”);
thirdPara.setAttribute(“id”, “thirdParagraph”);
parasDiv.appendChild(thirdPara);

Конечно, абзац не имеет никакого текста в нем прямо сейчас. Используя DOM, можно даже добавить текст к тому новому абзацу:

thirdPara.innerHTML = “This is my third paragraph.”;

Можно также хотеть добавить нижнее поле к включению div элемент, где существует в настоящее время только верхнее поле. Вы могли сделать это с setAttribute, но необходимо было бы скопировать существующее style атрибут с getAttribute, добавьте к нему, и затем отправьте ему назад использование setAttribute. Вместо этого используйте style блок:

parasDiv.style.borderBottom = “1px #000 solid”;

Наконец, возможно Вы хотите изменить стиль на всех элементах абзаца во включении div элемент. Можно использовать nodeList- генерация getElementsByTagName метод для получения массива элементов абзаца, и затем цикла через них. В этом примере мы добавим серый фон ко всем абзацам:

var parasInDiv = parasDiv.getElementsByTagName("p");
for (var i = 0; i < parasInDiv.length; i++) {
    parasInDiv[i].style.backgroundColor = "lightgrey";
}

Когда Вы сделаны, HTML эффективно похож на это:

<html>
<head>
    <title>My Sample HTML file</title>
</head>
<body>
 <div id=”allMyParas” style=”border-top: 1px #000 solid; border-bottom: 1px #000 solid;”>
    <p id=”firstParagraph” style="backgroundColor: lightgrey">
        This is my first paragraph.
    </p>
    <p id=”secondParagraph” style="backgroundColor: lightgrey">
        This is my second paragraph.
    </p>
    <p id="thirdParagraph" style="backgroundColor: lightgrey">
        This is my third paragraph.
    </p>
 </div>
</body>
</html>

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

Другие ресурсы

Следующий ресурс поможет Вам использовать Объектную модель документа JavaScript: