Справочник JavaScript: Object Document

Объект Document является корневым элементом для всего DOM дерева. Свойство document.documentElement ссылается на тег <html>, который выступает в роли корневого элемента документа. Свойство document.body соответствует тегу <body>, который в большинстве случаев представляет больший интерес, чем его родительский тег <html>. Свойство body объекта Document представляет собой особое удобное свойство, через которое предпочтительно обращаться к тегу <body> HTML документа.

document.getElementsByTagName("body")[0];

Это выражение вызывает метод getElementsByTagName() и выбирает первый элемент полученного массива. Вызов getElementsByTagName() возвращает массив всех элементов <body> в документе. HTML документы могут содержать только один тег <body>, поэтому мы знаем, что нас интересует первый элемент полученного массива. Метод getElementsByTagName() может использоваться для получения списка HTML элементов любого типа. Чтобы, например, найти все таблицы в документе, необходимо сделать следующее:

var tables = document.getElementsByTagName("table");
alert("Количество таблиц в документе: " + tables.length);

Обратите внимание: поскольку HTML теги нечувствительны к регистру, строки, передаваемые в getElementsByTagName(), также нечувствительны к регистру. То есть предыдущий код находит теги <table>, даже если в коде они выглядят как <TABLE>. Метод getElementsByTagName() возвращает элементы в том порядке, в ко тором они расположены в документе. И наконец, если передать методу getElementsByTagName() специальную строку "*", он вернет список всех элементов в порядке их присутствия в документе.

Вывести первую ссылку в документе:

var link = document.body.getElementsByTagName("a")[0];
console.log(link.href);

Доступ к элементу страницы по идентификатору getElementById

Для доступа к элементам страницы чаще всего используют идентификаторы элементов - атрибут "id". На странице располагаются несколько абзацев с идентификаторами "p1", "p2", … "p10". Сценарию необходимо перебрать все элементы и поменять цвет текста в них на заданный. Эта задача решается следующим образом:

<p id="p1">Абзац 1</p>
<p id="p2">Абзац 2</p>
...
<p id="p10">Абзац 10</p>
<script type="text/javascript">
    for (var i=1; i<=10; i++)
        document.getElementById("p"+i).style.color="red"; // поменять цвет текста на красный
</script>

Получив доступ к элементу мы можем выполнять над ним различные операции. В частности:

изменение содержимого элемента
изменение стиля элемента
изменение содержимого элемента

Для изменения содержимого элемента можно использовать 2 свойства элементов:

innerText - текстовое содержимое элемента;
innerHTML - содержимое элемента с HTML разметкой.

При перезаписи вызывается refresh. Практический JS: проблемы innerHTML

Свойство innerText используется как для чтения, так и для записи текстового содержимого элемента. Если свойству innerText присвоить в качестве значения строку "Это <b>полужирный</b> текст", то строка появится на странице без изменений. Это говорит о том, что свойство innerText не интерпретируется браузером при выводе на страницу.

Для того, чтобы разметка HTML интерпретировалась браузером, необходимо воспользоваться свойством innerHTML. Например, нам необходимо вывести на страницу строку "Да здравствует Мировая Революция", где слова "Мировая Революция" должны иметь полужирное начертание. Ниже приводится пример реализации поставленной задачи с использованием обоих свойств (innerText и innerHTML):

Листинг: Изменение содержимого элементов

<p id="lozung1"></p>
<p id="lozung2"></p>
<script type="text/javascript">
    lozung1.innerText="Да здравствует <b>Мировая Революция</b>!"; // используется innerText
    alert("Используется свойство 'innerText'");
    lozung2.innerHTML="Да здравствует <b>Мировая Революция</b>!"; // используется innerText
    alert("Используется свойство 'innerHTML'");
</script>

Для изменения стиля элемента используется свойство style. Это свойство, в свою очередь, является объектом, содержащим множество свойств, соответствующих атрибутам стиля элемента в CSS. Правда синтаксис записи свойств стиля в JavaScript и в CSS несколько отличается. Ниже приведены правила, следуя которым вы сможете преобразовать названия свойств стилей из CSS в JavaScript:

все простые свойства стилей CSS (такие как "color", "border", "padding" и т.п.) записываются без изменений в нижнем регистре; составные названия свойств стилей CSS (такие как "font-size", "background-color") записываются без символов "-", а слово, следующее за ним приписывается с заглавной буквы: fontSize, backgroundColor, listStyleType и т.д. Таким образом, для того, чтобы, например, установить толщину верхней границы некоторого элемента с идентификатором "someElement" равной 0.5 сантиметра, необходимо использовать следующий код:

someElement.style.borderTopWidth = "0.5cm";

Свойство document.cookie содержит все установленные Cookie.

Использование метода document.write()

Метод write() объекта document позволяет вывести на страницу строку текста с HTML разметкой. Вызов этого метода необходимо размещать в блоке сценария, располагающегося в теле страницы. Если метод document.write() используется некоторой функцией, то вызов этой функции так же необходимо размещать в теле документа, тогда как объявление функции может располагаться в заголовке страницы или даже во внешнем файле сценария.

Листинг: Использование метода 'document.write()'

<body>
    <script type="text/javascript">
        for(var i=1; i<=7; i++) {
            document.write ("<font size='"+i+"'>Text</font><br />");
        }
    </script>
</body>

Стоит отметить, что этот способ вывода данных на страницу менее предпочтителен, по сравнению с изменением содержимого имеющихся элементов и потому используется на практике в довольно редких случаях.

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

Свойство-ссылка

all Все элементы с траницы, включая теги <html>, <head>, <title> и <body>.
anchors Все “закладки” страницы
applets Все Java-апплеты, изображения и элементы ActiveX
embeds Все расширения, внедренные на страницу.
forms Все WEB-формы
frames Все фреймы набора фреймов.
images Все изображения на странице
layers Все слои страницы.
links Все гиперссылки на странице.
location Объект location для данного документа.
scripts Все скрипты, внедренные в страницу.
selection Объект selection, представляющий выделенный пользователем на странице текст. Поддерживается только IE. В Navigator используется метод getSelection.
styleSheets Все таблицы стилей, встроенные или привязанные к странице.

Справочник JavaScript: Object Document

getElementsByTagName

getElementById

style

document.cookie

document.write

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