Использование HTML DOM (Document Object Model) в скриптах на базе Windows Script Host
Иногда перед скриптописателем того или иного профиля встаёт задача разбора HTML-документов с различными целями. Это может быть «выдёргивание» той или иной информации непосредственно из Интернета, перелопачивание многочисленных HTML-файлов на жёстком диске компьютера для их модификации или просто «вычитывания» из них нужной информации, генерация HTML-файлов с различными целями и т.п. В связи с этим очень пригодится понимание так называемой объектной модели документов (DOM, Document Object Model), применение которой сделает процесс достаточно лёгким, логичным и прозрачным.
Данная статья будет полезна скриптописателям на базе Windows Script Host, а также начинающим веб-мастерам (ведь в клиентском JavaScript вовсю используется DOM) и программистам самых различных направлений (если ваша среда разработки в состоянии выступить в роли OLE-клиента, вы всегда можете использовать DOM). Все примеры кода в настоящей статье приводятся на языке VBScript для административных сценариев Windows Script Host. Для понимания изложенного материала желательно немного знать основы HTML и VBScript.
Что такое DOM
DOM, или объектная модель документов (Document Object Model), является способом моделирования HTML-документов. В рамках этой модели обеспечивается возможность доступа, навигации и манипулирования HTML-документами. DOM обеспечивает полный контроль над документом, предоставляя полный доступ и позволяя модифицировать содержимое документа.
Объектная модель документов представляет документ в виде дерева. Структура такого дерева полностью описывает весь HTML-документ, представляя каждый тег и его текстовое содержимое в виде узла дерева. В этом дереве определены отношения «родительский», «дочерний» и «родственный», позволяющие обойти всё дерево, т.е. весь HTML-документ. С помощью DOM можно манипулировать деревом документа любым требуемым образом, создавая новые узлы, удаляя существующие узлы и перемещая узлы в рамках дерева. Это эквивалентно добавлению новых, удалению и перемещению существующих тегов HTML и их текстового наполнения.
Имея дело с современными браузерами, вы можете быть уверены в полной поддержке DOM. Мы будем рассматривать DOM с позиций скриптописательства на базе Windows Script Host, поэтому нам в первую очередь интересен COM-объект «InternetExplorer.Application», который доступен через механизм OLE Automation. Этот объект предоставляет функциональность всего браузера, включая меню, панели инструментов, строку состояния и прочее, и находится в библиотеке «Microsoft Internet Controls» (shdocvw.dll в каталоге system32).
Структура DOM представляет собой иерархию объектов, похожую на объектую иерархию JavaScript или любого другого объектно-ориентированного языка. DOM предлагает свой полезный API, не привязанный к какому-либо конкретному языку программирования. Конечно же, в этой статье нет исчерпывающего перечня всех свойств и методов DOM. Полную информацию по этому вопросу вы можете почерпнуть на веб-узле Microsoft в библиотеке MSDN.
Создадим примерный HTML-документ, которым затем будем пользоваться в наших примерах скриптов:
Сохраните этот HTML-документ в файле C:\Temp\test.html
Все дальнейшие примеры в этой статье будут использовать этот HTML-документ, загружая его в объект браузера примерно такой строкой кода:
Это ни в коем случае не означает, что вы можете работать только с локальными HTML-файлами. Вместо локального пути всегда можно использовать URL, наподобие такого:
Программные точки входа в DOM
Если вы хотите начать навигацию по дереву с конкретного узла, то вы можете это сделать только от тех узлов, которым назначен атрибут id. Но, поскольку возмозжна произвольная навигация по дереву, вы можете достичь любого узла дерева.
Существует несколько «точек входа» в DOM через различные программные объекты.
Самая простая «точка входа» в DOM состоит в использовании свойства «all» объекта документа «InternetExplorer.Application»:
Не используйте вышеприведённый способ в клиентском JavaScript на веб-страницах, т.к. это может работать не во всех браузерах.
Способ, почти аналогичный предыдущему:
Оба вышеприведённых способа получают необходимый узел дерева с помощью его id. Конечно, это требует, чтобы уникальный идентификатор элементу был присвоен.
Ещё одна «точка входа» — получение списка всех узлов дерева с указанным именем тега:
Ещё одна «точка входа» — получение списка всех узлов дерева с указанным атрибутом name или id:
И наконец, можно обходить документ, начиная с его корня:
Свойства и атрибуты узла дерева DOM
Объект узла дерева предоставляет несколько свойств (nodeName, nodeValue, tagName, nodeType), смысл которых понятен из их имён:
Значение указанного атрибута узла проще всего получить методом getAttribute:
Можно воспользоваться методом getAttributeNode, получив специальный объект атрибута:
Для получения информации обо всех атрибутах узла можно воспользоваться коллекцией attributes:
Навигация по дереву DOM
Для навигации по родственным узлам можно воспользоваться свойствами узла дерева nextSibling и previousSibling:
Вышеприведённый пример получает узел с идентификатором «text» (в нашем примере — это тег абзаца), а затем получает предыдущий родственный узел до тех пор, пока это возможно (пока свойство previousSibling не вернёт пустой объект). Точно так же пример осуществляет навигацию и в противоположную сторону: пока свойство nextSibling не вернёт пустой объект.
Для навигации по дочерним узлам можно воспользоваться свойством childNodes, которое представляет из себя коллекцию дочерних узлов:
Вышеприведённый пример получает узел с идентификатором «text» (в нашем примере — это тег абзаца), затем с помощью метода hasChildNodes проверяет, есть ли у этого узла дочерние узлы, и, если есть, перебирает их.
Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему дочернему узлу:
C помощью коллекции childNodes несложно рекурсивно обойти весь документ от его корня:
И наконец, для перехода к родительскому узлу дерева можно воспользоваться его свойством parentNode:
Модификация дерева DOM
Метод removeChild узла дерева предоставляет возможность простого удаления элементов. Этот метод принимает один аргумент — дочерний узел, который необходимо удалить из родительского узла:
Вышеприведённый пример удаляет тег абзаца («p») из тела («body») документа и после этого делает окно Internet Explorer видимым. Если вы обновите страницу в этом окне, абзац появится, т.к. файл C:\Temp\test.html будет перезагружен (а наш скрипт этот файл не изменяет). Впрочем, мы всегда можем записать изменённый HTML-документ, к примеру, в другой файл:
Метод removeAttribute позволяет удалить указанный атрибут узла:
Вышеприведённый пример удаляет атрибут «border» у таблицы в HTML-документе, и таблица отображается без обрамления.
Примечание: свойства и методы, описываемые в настоящем разделе, могут не работать одинаково «гладко» во всех браузерах. Например, при динамическом удалении атрибута в каком-то браузере на экране может ничего не измениться. В данной статье нас интересует DOM сам по себе, но не веб-мастеринг c клиентским JavaScript как таковой. Поэтому имейте в виду, что не все приводимые здесь способы модификации дерева DOM пригодны для буквального использования при вёрстке сайтов.
Создание нового элемента дерева DOM выглядит несколько сложнее, чем все предыдущие примеры:
В вышеприведённом примере происходит следующее, по шагам:
- с помощью метода createElement создаётся объект абзаца, пока что никак не привязанный к дереву документа;
- с помощью метода setAttribute для свежесозданного абзаца устанавливается атрибут «align» со значением «right»;
- с помощью метода createTextNode создаётся объект текстового содержимого, пока что тоже ни к чему не привязанный;
- с помощью метода appendChild объект текстового содержимого добавляется в конец списка дочерних узлов абзаца, созданного ранее;
- и наконец, с помощью метода appendChild объект абзаца добавляется в конец списка дочерних узлов тела документа (узел «body»).
Таким образом, новые узлы дерева DOM создаются вначале как отдельные объекты, и только затем включаются в дерево тем или иным способом.
Метод appendChild всегда добавляет новый объект в конец списка дочерних узлов, и это, конечно, не единственный способ добавить новый узел в дерево. Метод insertBefore позволяет указать дочерний узел, перед которым должен быть вставлен новый узел. В качестве первого аргумента метода передаётся сам новый узел, а во втором аргументе передаётся узел, перед которым должна произойти вставка:
В вышеприведённом примере вставка нового абзаца происходит перед первым дочерним элементом тела документа («body»).
Ещё один метод — replaceChild — работает аналогично методу insertBefore, но не вставляет новый элемент перед указанным, а заменяет указанный элемент на новый. Для демонстрации вы можете просто заменить в предыдущем примере «insertBefore» на «replaceChild».
И наконец, метод cloneNode позволяет скопировать узел:
В вышеприведённом примере в конец тела документа («body») добавляется копия существующего абзаца с идентификатором «text». Метод cloneNode принимает необязательный булев параметр, который указывает, что необходимо рекурсивно скопировать всех потомков данного узла (если параметр опущен или равен False, потомки не скопируются). Как правило, копировать необходимо именно рекурсивно, т.к. например, собственно текстовое содержимое абзаца является его дочерним узлом, и не будет скопировано, если это не указано явно.
Людоговский Александр, 15.06.2008г.
JavaScript и объектная модель
Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что угодно. Как известно, всего два языка претендуют на лавры победителя в броузере. Это VBScript — подмножество Visual Basic-а и JavaScript. Вот последним мы и займемся, как наиболее универсальным.
Сами по себе изучать скриптовые языки не имеет смысла, т.к. они тесно связаны с объектной моделью броузера и, по сути дела, большая часть скриптов просто устанавливает соответствующие свойства объектов или вызывает их методы.
Что такое объектная модель?
Давным-давно, когда броузеры еще имели номер версии равный единице, ничего подобного не было и в помине. Информация просто выводилась на дисплей по мере поступления, не подвергаясь никаким изменениям. Все было просто, и даже глюков совместимости еще не было ��
Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим ее путь:
- Страничка скачивается с сайта и размещается в памяти компьютера
- Производится анализ странички, в результате которого она препарируется на составляющие.
- Блоки, из которых состоит страничка (
JavaScript — Объектная модель документа или DOM
Каждая веб-страница находится внутри окна браузера, который можно рассматривать как объект.
Объект Document представляет собой HTML-документ, который отображается в этом окне. Объект Document имеет различные свойства, которые относятся к другим объектам, которые разрешают доступ и изменение содержимого документа.
Способ доступа и изменения содержимого документа называется Document Object Model или DOM. Объекты организованы в иерархии. Эта иерархическая структура применяется к организации объектов в веб-документе.
- Окно — верх иерархии. Это самый главный элемент иерархии объектов.
- Объект документа. Каждый HTML-документ, который загружается в окно, становится объектом документа. Документ содержит содержимое страницы.
- Объект формы — все, заключенное в теги form . / form , задает объект формы.
- Элементы управления формой. Объект формы содержит все элементы, определенные для этого объекта, такие как текстовые поля, кнопки, переключатели и флажки.
Вот простая иерархия нескольких важных объектов —
Существует несколько DOM. В следующих разделах подробно описывается каждый из этих DOM и описывается, как вы можете использовать их для доступа и изменения содержимого документа.
- Legacy DOM — это модель, которая была представлена в ранних версиях языка JavaScript. Он хорошо поддерживается всеми браузерами, но обеспечивает доступ только к определенным ключевым частям документов, таким как формы, элементы формы и изображения.
- W3C DOM. Эта объектная модель документа позволяет получать доступ и изменять весь контент документа и стандартизован консорциумом World Wide Web (W3C). Эта модель поддерживается практически всеми современными браузерами.
- IE4 DOM — эта объектная модель документа была представлена в версии 4 браузера Microsoft Internet Explorer. IE 5 и более поздние версии включают поддержку большинства базовых функций W3C DOM.
Совместимость DOM
Если вы хотите написать скрипт с гибкостью использования W3C DOM или IE 4 DOM в зависимости от их доступности, вы можете использовать подход тестирования возможностей, который сначала проверяет наличие метода или свойства, чтобы определить, имеет ли браузер способность, которую вы желаете. Например,
Введение
На этой странице
Этот раздел представляет краткое знакомство с Объектной Моделью Документа (DOM) — что такое DOM, каким образом предоставляются структуры HTML и XML документов, и как взаимодействовать с ними. Данный раздел содержит справочную информацию и примеры.
Что такое Объектная Модель Документа (DOM)?
Объектная Модель Документа (DOM) – это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа. Представление DOM состоит из структурированной группы узлов и объектов, которые имеют свойства и методы. По существу, DOM соединяет веб-страницу с языками описания сценариев либо языками программирования.
Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ. DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированнное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.
Стандарты W3C DOM и WHATWG DOM формируют основы DOM, реализованные в большинстве современных браузеров. Многие браузеры предлагают расширения за пределами данного стандарта, поэтому необходимо проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера.
Например: стандарт DOM описывает, что метод getElementsByTagName в коде, указанном ниже, должен возращать список всех элементов
Все свойства, методы и события, доступные для управления и создания новых страниц, организованы в виде объектов. Например, объект document , который представляет сам документ, объект table , который реализует специальный интерфейс DOM HTMLTableElement, необходимый для доступа к HTML-таблицам, и так далее. Данная документация даёт справку об объектах DOM, реализованных Gecko-подобных браузерах.
DOM и JavaScript
Небольшой пример выше, как почти все примеры в этой справке – это JavaScript. То есть пример написан на JavaScript, но при этом используется DOM для доступа к документу и его элементам. DOM не является языком программирования, но без него JavaScript не имел бы никакой модели или представления о веб-странице, HTML-документе, XML-документе и их элементах. Каждый элемент в документе — весь документ в целом, заголовок, таблицы внутри документа, заголовки таблицы, текст внутри ячеек таблицы — это части объектной документной модели для этого документа, поэтому все они могут быть доступны и могут изменяться с помощью DOM и скриптового языка наподобие JavaScript.
Вначале JavaScript и DOM были тесно связаны, но впоследствии они развились в различные сущности. Содержимое страницы хранится в DOM и может быть доступно и изменяться с использованием JavaScript, поэтому мы можем записать это в виде приблизительного равенства:
API (веб либо XML страница) = DOM + JS (язык описания скриптов)
DOM спроектирован таким образом, чтобы быть независимым от любого конкретного языка программирования, обеспечивая структурное представление документа согласно единому и последовательному API. Хотя мы всецело сфокусированы на JavaScript в этой справочной документации, реализация DOM может быть построена для любого языка, как в следующем примере на Python:
Для подробной информации о том, какие технологии участвуют в написании JavaScript для веб, смотрите обзорную статью JavaScript technologies overview.
Каким образом доступен DOM?
Вы не должны делать ничего особенного для работы с DOM. Различные браузеры имеют различную реализацию DOM, эти реализации показывают различную степень соответсвия с действительным стандартом DOM (это тема, которую мы пытались не затрагивать в данной документации), но каждый браузер использует свой DOM, чтобы сделать веб страницы доступными для взаимодествия с языками сценариев.
При создании сценария с использованием элемента
JavaScript – Document Object Model или DOM
Объект Document представляет HTML-документ, который отображается в этом окне. Объект Document имеет различные свойства, которые относятся к другим объектам, которые позволяют иметь доступ и модификацию содержимого документа.
Кстати, содержимое документа доступно и модифицированная версия называется Document Object Model, или DOM. Объекты организованы в иерархию. Эта иерархическая структура применяется к организации объектов в веб-документе.
- Объект Window – Вершина иерархии. Это самый дальний от центра элемент иерархии объектов.
- Объект Document – Каждый HTML документ, который загружается в окно становится объектом document. Document содержит содержимое страницы.
- Объект Form – Все заключено в теги , задает объект form.
- Элементы управления формами – Объект form содержит все элементы, определенные для этого объекта, таких как текстовые поля, кнопки, переключатели и флажки.
Вот простая иерархия несколько важных объектов:
Существуют несколько DOM. В следующих разделах подробно объясняется каждый из DOM и описывается, как их можно использовать для доступа к содержимому документа и его изменения.
- Наследство DOM – это модель, которая была введена в ранних версиях языка JavaScript. Хорошо поддерживается всеми браузерами, но позволяет получить доступ только к определенным ключевым частям документов, таким как формы, элементов форм и мультимедиафайлов.
- W3C DOM – Эта объектная модель документа позволяет получить доступ к изменению всего содержания документа и стандартизирован World Wide Web Consortium (W3C). Эта модель поддерживается практически всеми современными браузерами.
- IE4 DOM – Эта объектная модель документа была введена в браузере Internet Explorer версии 4 от Microsoft. IE 5 и более поздние версии включают в себя поддержку большинства основных функций W3C DOM.
Совместимость с DOM
Если вы хотите написать сценарий с гибкостью и использовать либо W3C DOM или IE 4 DOM в зависимости от их наличия, то вы можете использовать подход возможность-тестирования, который сначала проверяет наличие метода или свойства, чтобы определить, имеет ли браузер способность, которую вы хотите. Например:
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Работа с DOM
Введение в DOM
Одой из ключевых задач JavaScript является взаимодействие с пользователем и манипуляция элементами веб-страницы. Для JavaScript веб-страница доступна в виде объектной модели документа (document object model) или сокращенно DOM. DOM описывает структуру веб-станицы в виде древовидного представления и предоставляет разработчикам способ получить доступ к отдельным элементам веб-станицы.
Важно не путать понятия BOM (Browser Object Model — объектная модель браузера) и DOM (объектная модель документа). Если BOM предоставляет доступ к браузеру и его свойствам в целом, то DOM предоставляет доступ к отдельной веб-странице или html-документу и его элементам.
Например, рассмотрим простейшую страницу:
Дерево DOM для этой страницы будет выглядеть следующим образом:
Таким образом, все компоненты упорядочены в DOM иерархическим образом, где каждый компонент представляет отдельный узел. То есть каждый элемент, например, элемент div , представляет собой узел. Но также и текст внутри элемента представляет отдельный узел.
Существует следующие виды узлов:
Attr : атрибут html-элемента
Document : корневой узел html-документа
DocumentType : DTD или тип схемы XML-документа
DocumentFragment : место для временного хранения частей документа
EntityReference : ссылка на сущность XML-документа
ProcessingInstruction : инструкция обработки веб-страницы
Comment : элемент комментария
Text : текст элемента
CDATASection : секция CDATA в документе XML
Entity : необработанная сущность DTD
Notation : нотация, объявленная в DTD
Несмотря на такое большое количество типов узлов, как правило, мы будем работать только с некоторыми из них.
Объектная модель DOM
Изучаю DOM Явыскрипт вот оппробовал получить доступ через структуру которую имеет язык Джаваскрпипт чего-то ИЕ останавливается на 4 строке и говорит что эт оесть нуль и не является объектом. Я хочу изменить надпись на кнопке под номером №3.
Объектная модель документа DOM
Помогите пожалуйста сделать. Список городов на странице, при щелчке по пункту списка добавляется.
Объектная модель документа.
Очень прошу, помогайте! JS вообще не мое, в нем я 0. Собственно, само задание прикрепляю в.
JavaScript и объектная модель документа. Создать файл
1. Создайте файл domJS.html. 2. В документе domJS.html создайте форму с идентификатором и.
DOM- модель
Найти все элементы всех списков, которые содержат ссылки и раскрасить текстовое содержимое этих.
| Javascript | |
