Инструменты пользователя

Инструменты сайта


object_document

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

object_document [2015/04/01 06:46] (текущий)
Строка 1: Строка 1:
 +====== Object Document ======
 +  * [[http://​w3schools.com/​jsref/​dom_obj_document.asp|HTML DOM Document Object]]
 +**Объект Document является корневым элементом** для всего [[DOM]] дерева. Свойство document.documentElement ссылается на тег <​html>,​ который выступает в роли корневого элемента документа. Свойство document.body соответствует тегу <​body>,​ который в большинстве случаев представляет больший интерес,​ чем его родительский тег <​html>​. Свойство body объекта Document представляет собой особое удобное свойство,​ через которое предпочтительно обращаться к тегу <​body>​ HTML документа.
 +====== getElementsByTagName ======
 +<file javascript>​
 +document.getElementsByTagName("​body"​)[0];​
 +</​file>​
 +Это выражение вызывает метод getElementsByTagName() и выбирает первый элемент полученного массива. Вызов getElementsByTagName() возвращает массив всех ​ элементов <​body>​ в документе. HTML документы могут содержать только один тег <​body>,​ поэтому мы знаем, что нас интересует первый элемент полученного массива.
 +Метод getElementsByTagName() может использоваться для получения списка HTML элементов любого типа. Чтобы, например,​ найти все таблицы в документе,​ необходимо сделать следующее:​
 +<file javascript>​
 +var tables = document.getElementsByTagName("​table"​);​
 +alert("​Количество таблиц в документе:​ " + tables.length);​
 +</​file>​
 +Обратите внимание:​ поскольку HTML теги нечувствительны к регистру,​ строки,​
 +передаваемые в getElementsByTagName(),​ также нечувствительны к регистру. То
 +есть предыдущий код находит теги <​table>,​ даже если в коде они выглядят как
 +<​TABLE>​. Метод getElementsByTagName() возвращает элементы в том порядке,​ в ко
 +тором они расположены в документе. И наконец,​ если передать методу getElementsByTagName() специальную строку "​*",​ он вернет список всех элементов в порядке их присутствия в документе.
 +  * Вывести первую ссылку в документе:<​file javascript>​
 +var link = document.body.getElementsByTagName("​a"​)[0];​
 +console.log(link.href);​
 +</​file>​
 +===== getElementById =====
  
 +  * **Доступ к элементу страницы по идентификатору getElementById**
 +Для доступа к элементам страницы чаще всего используют идентификаторы элементов - атрибут "​id"​. На странице располагаются несколько абзацев с идентификаторами "​p1",​ "​p2",​ ... "​p10"​. Сценарию необходимо перебрать все элементы и поменять цвет текста в них на заданный. Эта задача решается следующим образом: ​
 +<​file>​
 +<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>​
 +</​file>​
 +Получив доступ к элементу мы можем выполнять над ним различные операции. В частности: ​
 +  * изменение содержимого элемента
 +  * изменение стиля элемента
 +  * изменение содержимого элемента
 +Для изменения содержимого элемента можно использовать 2 свойства элементов: ​
 +
 +  * **innerText** - текстовое содержимое элемента;​
 +  * **innerHTML** - содержимое элемента с HTML разметкой. <note important>​При перезаписи вызывается refresh. [[http://​habrahabr.ru/​blogs/​webdev/​31413/​|Практический JS: проблемы innerHTML]]</​note>​
 +Свойство innerText используется как для чтения,​ так и для записи текстового содержимого элемента. Если свойству innerText присвоить в качестве значения строку "​Это <​b>​полужирный</​b>​ текст",​ то строка появится на странице без изменений. Это говорит о том, что свойство innerText не интерпретируется браузером при выводе на страницу. ​
 +
 +Для того, чтобы разметка HTML интерпретировалась браузером,​ необходимо воспользоваться свойством innerHTML. Например,​ нам необходимо вывести на страницу строку "Да здравствует Мировая Революция",​ где слова "​Мировая Революция"​ должны иметь полужирное начертание. Ниже приводится пример реализации поставленной задачи с использованием обоих свойств (innerText и innerHTML): ​
 +
 +Листинг:​ Изменение содержимого элементов  ​
 +<​file>​
 +<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>​
 +</​file>​
 +===== style =====
 +
 +**Для изменения стиля элемента используется свойство style.** Это свойство,​ в свою очередь,​ является объектом,​ содержащим множество свойств,​ соответствующих атрибутам стиля элемента в CSS. Правда синтаксис записи свойств стиля в JavaScript и в CSS несколько отличается. Ниже приведены правила,​ следуя которым вы сможете преобразовать названия свойств стилей из CSS в JavaScript: ​
 +
 +все простые свойства стилей CSS (такие как "​color",​ "​border",​ "​padding"​ и т.п.) записываются без изменений в нижнем регистре; ​
 +составные названия свойств стилей CSS (такие как "​font-size",​ "​background-color"​) записываются без символов "​-",​ а слово, следующее за ним приписывается с заглавной буквы: fontSize, backgroundColor,​ listStyleType и т.д. Таким образом,​ для того, чтобы, например,​ установить толщину верхней границы некоторого элемента с идентификатором "​someElement"​ равной 0.5 сантиметра,​ необходимо использовать следующий код: ​
 +<​file>​
 +someElement.style.borderTopWidth = "​0.5cm";​
 +</​file>​
 +===== document.cookie =====
 +Свойство document.cookie содержит все установленные [[cookie]].
 +===== document.write =====
 +  * **Использование метода document.write()**
 +Метод write() объекта document позволяет вывести на страницу строку текста с HTML разметкой. Вызов этого метода необходимо размещать в блоке сценария,​ располагающегося в теле страницы. Если метод document.write() используется некоторой функцией,​ то вызов этой функции так же необходимо размещать в теле документа,​ тогда как объявление функции может располагаться в заголовке страницы или даже во внешнем файле сценария. ​
 +
 +Листинг:​ Использование метода '​document.write()'  ​
 +<​file>​
 +<​body>​
 +    <script type="​text/​javascript">​
 +        for(var i=1; i<=7; i++) {
 +            document.write ("<​font size='"​+i+"'>​Text</​font><​br />"​);​
 +        }
 +    </​script>​
 +</​body>​
 +</​file>​
 +<​note>​Стоит отметить,​ что этот способ вывода данных на страницу менее предпочтителен,​ по сравнению с изменением содержимого имеющихся элементов и потому используется на практике в довольно редких случаях.</​note> ​
 +====== Коллекции объектов ======
 +Коллекция – это своего рода массив объектов,​ проиндексированный не только по числовым номерам элементов,​ но и по их именам,​ и имеющий свойства и методы.
 +Объект 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 Все таблицы стилей,​ встроенные или привязанные к странице.
загрузка...
object_document.txt · Последние изменения: 2015/04/01 06:46 (внешнее изменение)