Главная | Обратная связь | Поможем написать вашу работу!

Подчиненные объекты и коллекции объекта document

Справочкик по JavaScript

О этом справочнике

Справочник предназначается для людей, уже освоивших азы программирования в JavaScript.

Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.

В связи с тем, что данный ресурс постоянно пополняется новой информацией, скачать обновленную версию справочника можно из раздела Download

Дата выхода данной версии справочника: 12:33, 21 марта 2007.

Также на сайте доступны для скачивания справочники по PHP, CSS, Perl, MySQL.

Совместное использование HTML и JavaScript

Прежде всего надо рассмотреть тег <SCRIPT>. Этот тег служит для вставки скриптов в HTML-код страницы. Его формат:

<SCRIPT [language="{Язык программирования, на котором написан скрипт}"] [src="{Адрес файла со скриптом}"]>... Текст скрипта</SCRIPT>

Текст скрипта помещаетс внутрь тега <SCRIPT>

Атрибут language позволяет указать, на каком языке программирования написан скрипт.

Значение по умолчанию - "JavaScript".

Internet Explorer поддерживается скрипты, написанные на языке VBScript, которому соответствует значение атрибута "VBScript".

Navigator позволяет задавать версию интерпретатора JavaScript:

Это может пригодиться в случаях, когда вы используете возможность языка JavaScript, специфичную для какой-либо версии.

В следующей таблице приведены версии интерпретатора JavaScript и соответствие их разным версиям Navigator:

Второй атрибут src служит для задания адреса файла, содержащего скрипт.

В этом случае обычно парный тег <SCRIPT> превращается в одинарный:

js - стандартное расширение для JavaScript-файлов.

Но что случиться, если Web-обозреватель не поддерживает скрипты? (Например, это слишком старая версия программы, или пользователь отключил поддержку скриптов в настройках безопасности.) Web-обозреватель проигнорирует тег <SCRIPT> и выведет на экран текст скрипта.

Чтобы избежать этого, скрипт внутри тега <SCRIPT> рекомендуют заключать в комментарий.

Однако некоторые версии Navigator в этом случае "не видят" скрипта, хотя, согласно техническим руководствам самой Netscape, должны. Так что этот совет применим только для Internet Explorer.

В качестве альтернативы вы можете использовать тег <NOSCRIPT>.

Этот тег поддерживается Internet Explorer и Navigator:

<NOSCRIPT>... Текст, отображаемый, если Web-обозреватель неподдерживает скрипты</NOSCRIPT>

Тег <NOSCRIPT> может помещаться где угодно в тексте страницы, даже вне тега <BODY>. Текст, помещенный внутрь этого тега, будет отображаться вместо всей страницы. То есть, пользователь Web-обозревателя с отключенной поддержкой скриптов увидит в окне только этот текст и больше ничего.

Правила написания скриптов

Прежде всего надо рассмотреть тег <SCRIPT>. Этот тег служит для вставки скриптов в HTML-код страницы. Его формат:

Текст скрипта помещаетс внутрь тега <SCRIPT>

Атрибут language позволяет указать, на каком языке программирования написан скрипт.

Значение по умолчанию - "JavaScript".

Internet Explorer поддерживается скрипты, написанные на языке VBScript, которому соответствует значение атрибута "VBScript".

Navigator позволяет задавать версию интерпретатора JavaScript:

В следующей таблице приведены версии интерпретатора JavaScript и соответствие их разным версиям Navigator:

Второй атрибут src служит для задания адреса файла, содержащего скрипт.

В этом случае обычно парный тег <SCRIPT> превращается в одинарный:

js - стандартное расширение для JavaScript-файлов.

Чтобы избежать этого, скрипт внутри тега <SCRIPT> рекомендуют заключать в комментарий.

В качестве альтернативы вы можете использовать тег <NOSCRIPT>.

Этот тег поддерживается Internet Explorer и Navigator:

<NOSCRIPT>... Текст, отображаемый, если Web-обозреватель неподдерживает скрипты</NOSCRIPT>

Объектная модель документа

Надо отметить, что JavaScript поддерживает так называемые внешние классы и объекты, определенные другими программами.Web-страница, которую вы просматриваете в окне Web-обозревателя, может быть описана как набор объектов. Скажем, она включает большой объект "документ-в-целом" и более мелкие объекты: "абзац-1", "абзац-2", "абзац-1" и "рисунок". Вы можете обращаться к этим объектам из того же JavaScript.

Рисунок.ДвигайВперед;Абзац-1.Ширина = 80%;Абзац-3.Покажи;

Конечно, здесь сильно утрируется, но принцып таков.

Например, рассмотрим скрипт:

var d;d=new Date();document.write(d.toString());

Документ document - это наш "документ-в-целом". А write - его метод, вставляющий текст, переданный в качестве параметра, в текущее место HTML-документа.

Совокупность объектов, описывающая web-страницу, со всеми их методами и свойствами называется объектной моделью документа. А технология создания web-страницы, при которой обычный HTML-код объединяется с JavaScript-кодом, причем последний управляет страницей с помощью объектной модели, называется динамическим HTML (DHTML).

Объект document

Прежде всего надо отметить, что объект document существует в единственном экземпляре для всего HTML-документа. Он присутствует всегда, если существует HTML-документ, поэтому специально создавать его не требуется.

ActiveElement

Используется в сценарии для получения ссылки на элемент странички находящийся в данный момент в фокусе

AlinkColor

Задает или возвращает цвет активных гиперссылок.

document.alinkColor[ ="{Цвет}"];

Anchors

Объекты анкеров представляют собой выражения в документе HTML, описанные в дескрипторе. Данные объекты обозначаются в URL символом #, расположенным между URL странички и именем анкера.

Пример: Получение количества анкеров в документе

var anchorCount=document.anchors.length

Applets

Благодаря свойству applets можно обращаться к аплетам java, содержащимся в документе.

BgColor

Задает или возвращает цвет фона страницы. В IE работает правильно, только если цвет страницы установлен атрибутом BGCOLOR.

Body

Этот объект имеет множество ключевых свойств для управления внешним видом странички. Для доступа к его свойствам лучше использовать выражение document.body.

Charset

Это свойство устанавливает кодировку, используемую браузером для отображения текущей странички. Используется только IE.

CharacterSet

Это свойство устанавливает кодировку, используемую браузером для отображения текущей странички.Используется только NN.

CompatMode

в Internet Explorer 6 появилось новое свойство объекта document, которое обзывается compatMode. Благодаря этому свойству (оно, кстати, только для чтения) мы можем определить, какой режим включён в данный момент — BackCompat (IE 4.x–IE 5.x) или CSS1Compat (IE 6). Исходя из значения этого свойство, мы можем, например, указывать различные значения CSS свойств width, margin или padding:

if (document.getElementById){oBlock = document.getElementById("mydiv");oBlock.style.width = ((document.compatMode) && (document.compatMode == "CSS1Compat"))? "200px": "250px";}

DefaultCharset

Это свойство устанавливает кодировку, используемую браузером для отображения текущей странички.Различия между charset и defaultCharset не найдено, однако если в сценарии временно изменять свойство charset, для восстановления оригинального набора символов можно воспользоваться defaultCharset.

DesignMode

Это свойство используется, когда браузер IE выступает в качестве компонента другого приложения, данная ситуация описана здесь. Оно разрешает/запрещает изменение HTML кода текущей странички, в обычных условиях это свойство не имеет никакого действия.

DocumentElement

Возвращает ссылку на объект HTML или XML - элемента, который представляет содержимое всего текущего документа.

Embeds

Всякий раз, когда необходимо загрузить данные, требующие надстройки (внедряемого модуля)-приложения для их воспроизведения либо вывода на экран, используют дескриптор Свойство document.embeds - это единственный способ определения таких дескрипторов, добавленных в документ

var сount=document.embeds.length

Expando

Это свойство установленное в true позволяет использовать новые свойства объекта, добавленные вами при выполнении сценария

FgColor

Задает или возвращает цвет текста. Значение по умолчанию #000000.

FileCreatedDate

Возвращает дату создания файла HTML-документа в формате mm/dd/yyyy, только для чтения.

FileModifiedDate

Возвращает дату последнего изменения файла HTML-документа в формате mm/dd/yyyy, только для чтения.

FileSize

Возвращает размер файла HTML-документа или графического изображения.

Forms

Возвращает массив объектов form. Первым элементом массива document.forms[0] является ссылка на самую первую форму, определённую в документе.

Frames

Возвращает массив объектов frame. Первым элементом массива document.frames[0] является ссылка на самую первыйфрейм, определённый в документе.

Height

Задает или возвращает высоту текущего окна или фрейма в пикселях, соответствует свойству в IE scrollHeight.

Images

edocument.images[0]

LastModified

Возвращает дату последнего изменения документа в виде строки.

Layers

Это массив слоёв расположенных в документе

LinkColor

Задает или возвращает цвет гиперссылок в документе. В IE работает правильно, только если цвет гипессылок установлен атрибутом LINK.

Links

Массив содержит в себе ссылки на все объекты ссылок в текущем документе, нумерация начинается с 0.

Location

Установка нового URL адреса свойству location приведёт к загрузке странички находящейся по этому адресу

URL

Свойство только для чтения, возвращает адрес текущей загруженной в браузер странички.

ParentWindow

Свойство document.parentWindow возвращает ссылку на объект window, который содержит текущий документ.

Plugins

Аналог document.embeds

Protocol

Возвращает версию протокола, с помощью которой и осуществлялся доступ к текущему документы

ReadState

Возвращает текущее состояние документа.

Referrer

Возвращает Интернет-адрес Web-страницы, с которой пользователь перешел на текущую страницу. Если же пользователь перешел на нее простым набором адреса в строке Web-обозревателя, возвращается пустая строка.

Script

Возвращает массив всех элементов SCRIPT содержащихся в документе. Имеется возможность не только просматривать массив, но и добавлять/удалять элементы.

Security

Это свойство предоставляет информацию о типе защиты, если таковая применяется в текущем документе.

Selection

Свойство document.selection возвращает объект selection, содержимое которого отображается в окне браузера как выделение основного текста. Это выделение может осуществляется пользователем или с помощью сценария в объекте TextRange

StyleSheets

Массив styleSheets содержит ссылки на все элементы STYLE, присутствующие на текущей страничке.

Title

Возвращает заголовок Web-страницы, заданный в теге <TITLE>

URL

Задает или возвращает интернет-адрес текущей Web-страницы.

URLUnencoded

Свойство возвращает строку URL-адреса в виде кода. Это означает, что все не буквенно-цифровые символы (имеются ввиду только цифры и буквы латинского алфавита) будут перекодированны в их URL-представление. т.е.знак % и шестнадцатеричный код символа (например пробел будет выглядеть как %20).

VlinkColor

Задает или возвращает цвет посещенных гиперссылок в документе. В IE работает правильно, только если цвет посещенных гиперссылок установлени атрибутом VLINK.

Wigth

Ширина документа в пикселях.

Свойства

ActiveElement

Используется в сценарии для получения ссылки на элемент странички находящийся в данный момент в фокусе

AlinkColor

Задает или возвращает цвет активных гиперссылок.

document.alinkColor[ ="{Цвет}"];

Anchors

Пример: Получение количества анкеров в документе

var anchorCount=document.anchors.length

Applets

Благодаря свойству applets можно обращаться к аплетам java, содержащимся в документе.

BgColor

Body

Charset

CharacterSet

CompatMode

if (document.getElementById){oBlock = document.getElementById("mydiv");oBlock.style.width = ((document.compatMode) && (document.compatMode == "CSS1Compat"))? "200px": "250px";}

DefaultCharset

DesignMode

DocumentElement

Возвращает ссылку на объект HTML или XML - элемента, который представляет содержимое всего текущего документа.

Embeds

var сount=document.embeds.length

Expando

FgColor

Задает или возвращает цвет текста. Значение по умолчанию #000000.

FileCreatedDate

Возвращает дату создания файла HTML-документа в формате mm/dd/yyyy, только для чтения.

FileModifiedDate

Возвращает дату последнего изменения файла HTML-документа в формате mm/dd/yyyy, только для чтения.

FileSize

Возвращает размер файла HTML-документа или графического изображения.

Forms

Frames

Height

Задает или возвращает высоту текущего окна или фрейма в пикселях, соответствует свойству в IE scrollHeight.

Images

edocument.images[0]

LastModified

Возвращает дату последнего изменения документа в виде строки.

Layers

Это массив слоёв расположенных в документе

LinkColor

Links

Массив содержит в себе ссылки на все объекты ссылок в текущем документе, нумерация начинается с 0.

Location

Установка нового URL адреса свойству location приведёт к загрузке странички находящейся по этому адресу

URL

Свойство только для чтения, возвращает адрес текущей загруженной в браузер странички.

ParentWindow

Свойство document.parentWindow возвращает ссылку на объект window, который содержит текущий документ.

Plugins

Аналог document.embeds

Protocol

Возвращает версию протокола, с помощью которой и осуществлялся доступ к текущему документы

ReadState

Возвращает текущее состояние документа.

Referrer

Script

Security

Это свойство предоставляет информацию о типе защиты, если таковая применяется в текущем документе.

Selection

StyleSheets

Массив styleSheets содержит ссылки на все элементы STYLE, присутствующие на текущей страничке.

Title

Возвращает заголовок Web-страницы, заданный в теге <TITLE>

URL

Задает или возвращает интернет-адрес текущей Web-страницы.

URLUnencoded

VlinkColor

Wigth

Ширина документа в пикселях.

Методы

Clear()

Этот метод предназначен для очистки текущего документа из окна браузера.

Close()

Заставляет Web-страницу немедленно обновить свое содержимое после использования методов write. Метод не принимает параметров и не возвращает значения.

CreateAttribute()

createAttribute("Имя Атрибута")

Генерирует объект атрибута и возвращает ссылку на него. При вызове метода указывается только название атрибута, таким образом, в сценарии назначается значение свойству nodeValue, а затем новый атрибур добавляется в существующий элемент с помощью метода *Возвращает: ссылка на объект атрибута

SetAttributeNode

var newAttr = document.createAttribute("width");newAttr.nodeValue = "80%";document.getElementById("myTable").setAttributeNode(newAttr);

CreateElement()

createElement("Имя дескриптора")

Генерирует объект атрибута для любого дескриптора HTML(или XML), указанного в качастве параметра. Этот объект официально не является частью объектной модели текущего документа, так как он в состав документа пока ещё не входит. Но данный метод используется для вызова объекта элемента, который в конечном счёте будет помещён в документ.

ElementFromPoint()

elementFromPoint({X}, {Y})

Возвращает ссылку на элемент, находящийся по координатам X и Y. Метод принимает два параметра, задающие в пикселях горизональную и вертикальную координаты соответственно.

GetElementById()

getElementById({Имя элемента})

Возвращает элемент, имя которого передано в качестве параметра. Имя элемента страницы задается атрибутом ID. Метод принимает единственный параметр - имя элемента страницы.

GetSelection()

Возвращает строку, содержащую текст, выделенный пользователем на странице. Метод не принимает параметров.

Write()

write({Текст})

Записывает текст или HTML-код, переданный как параметр, в текущее место документа.

WriteLn()

writeLn({Текст})

То же самое, что write, но в конце добавляет символ возврата каретки и перевода строки.

Коллекция объектов

Коллекция - это своего рода массив объектов, проиндексированный не только по числовым номерам элементов, но и по их именам, и имеющий свойства и методы. Коллекция отличается от ассоциативного массива именно наличием свойств и методов, т.е. коллекция - сама по себе объект.

Рассмотрим, например, коллекцию images, которую включает в себя объект document. Вы можете получить доступ к отдельным ее элементам по порядковому номеру или уникальному имени.

document.images.item(1)document.images("iamge1")

Заметьте, что мы указываем индекс элемента коллекции не в квадратных, а в круглых скобках, потому что он фактически является аргументом функции-метода item, поддерживаемой всеми коллекциями. Имя этого метода можно опускать.

document.images(1)document.images("image1")

Все элементы Web-страницы нумеруются в порядке их появления в HTML-коде. А уникальные имена задаются специальным атрибутом ID, доступным практически во всех тегах.

Для некоторых тегов (в частности <IMG> и <FRAME>) доступен также атрибут NAME, выполняющий ту же функцию, что и ID.

Коллекция all представляет все элементы Web-страницы без исключений, в том числе и изображения. К элементам этой коллекции можно обращаться по номеру (нумеруются они в порядке появления в HTML-коде) или по имени.

document.all(8)document.all("iamge1")

Атрибут ID требует уникальности имен всех элементов, но только формально. Реально же на странице могут встретиться два или более элемента с одинаковыми именами. В таком случае нужно будет указать второй индекс

document.all("image1", 2)

или выражение document.all("image1") вернет коллекцию всех изображений с именем image1.

Также все коллекции имеют свойство length, вызывающее количество элементов коллекции. Надо отметить, что элементы коллекции нумеруются с нуля, поэтому последний ее элемент будет иметь номер length-1.

Некоторые коллекции могут иметь методы для добавления и удаления элементов и других целей.

Подчиненные объекты и коллекции объекта document

Объект document содержит внутри себя множество подчиненных объектов и коллекций. В следующей таблице перечисленны свойства, возвращающие ссылки на них, и приведены описания соответствующих объектов и коллекций.

Коллекция all имеет дополнительный метод tags, позволяющий фильтровать элементы коллекции по их тегу. В качестве параметра этот метод принимает строковое значение нужного тега.

document.all.tags("H1")

Данное выражение вернет ссылку на коллекцию, содержащую только заголовки первого уровня.

Такой же метод поддерживает коллекция links.

Также хочу упомянуть два метода, поддерживаемых Internet Explorer начиная с 5.0. Это методы getElementByName и getElementByTagName. Первый из них возвращает коллекцию элементов со значением атрубута NAME, переданным в качестве параметра. Поскольку атрибут NAME применяется в современном HTML очень редко, польза от этого метода невелика. Второй метод возвращает коллекцию элементов, созданных посредством тега, переданного в качестве параметра.

document.getElementByName("someimage")document.getElementByTagName("H1")

12 3 Следующая ⇒

Воспользуйтесь поиском по сайту: