Содержание

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

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

getElementsByTagName

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() специальную строку "*", он вернет список всех элементов в порядке их присутствия в документе.

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 свойства элементов:

При перезаписи вызывается 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

Для изменения стиля элемента используется свойство 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

Свойство 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 содержит внутри себя множество подчиненных объектов и коллекций. Ниже перечислены свойства, возвращающие ссылки на них, и приведены описания соответствующих объектов и коллекций.

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