Веб-мастеринг на 100%

Веб-мастеринг на 100%
Автор: Роман Клименко
Год: 2013
ISBN: 978-5-496-00079-6
Страниц: 512
Язык: Русский
Формат: PDF
Размер: 12 Мб

Download

Данная книга предназначена для тех, кто хочет научиться веб-мастерингу и стать специалистом по созданию веб-сайтов на профессиональном уровне. В издании описываются самые популярные и востребованные веб-технологии – HTML5, CSS3, javascript, jQuery, Ajax, PHP, а также приемы работы с системой управления содержимым сайта CMS Drupal и секреты раскрутки сайта (SEO). С помощью этих средств вы сможете создавать сайты любого назначения от “визиток” и блогов до интерактивных интернет-магазинов и порталов с непрерывно обновляемыми новостями.
Прочитав эту книгу, вы станете настоящим веб-мастером, готовым к работе над любыми проектами на 100%.

+

Images

Строка обращения: window.document.images. Является коллекцией и содержит массив изображений, которые есть на веб-странице, открытой в данный момент в окне браузера.

Links

Строка обращения: window.document.links. Является коллекцией и содержит массив ссылок, которые есть на веб-странице, открытой в данный момент в окне браузера.

Примеры

Простое перечисление свойств и методов бывает полезным, если вы и так прекрасно знаете, как все это работает. В противном случае нам никак не обойтись без множества примеров. Однако в формате данной книги модели DOM будет уделено гораздо меньше внимания, чем возможностям jQuery, о которых мы поговорим далее. Так что примеров будет не множество, а лишь несколько.

Доступ к элементам веб-страницы

Чтобы работать с конкретным тегом на веб-странице (изменять его атрибуты, добавлять свойства CSS, изменять содержимое тега и т. д.), вам сначала необходимо получить к нему доступ, то есть каким-либо образом обратиться к нужному тегу на веб-странице.

Дерево элементов веб-страницы доступно из объекта document.

Корневым элементом любого дерева правильно сверстанной веб-страницы является тег html. Получить доступ к вершине дерева (то есть к тегу html) можно с помощью вызова document.documentElement. Однако вместо вершины дерева вы можете обратиться сразу к тегу body. Это делается с помощью вызова document.body.

Дальнейшая навигация по веб-странице может выполняться различными способами.

То есть мы создали функцию, которая вызывает сама себя до тех пор, пока не будут перебраны все элементы на веб-странице. Функции, вызывающие сами себя, называются рекурсивными. При их создании самое главное — не превратить вызов в цикл. Иначе функция будет вызывать сама себя до конца света. Но в нашем примере этого, кажется, не случилось.

Нам осталось лишь запустить данную функцию, указав в качестве ее аргумента тег, начиная с которого нужно выполнить перебор. Например:

<body onload=”getallchild(document.body);”>

firstChild. Свойство firstChild позволяет получить доступ к первому дочернему элементу текущего элемента. Если детей у элемента нет, свойство firstChild равно null.

lastChild. Свойство lastChild дает возможность получить доступ к последнему дочернему элементу текущего элемента. Если детей у элемента нет, свойство lastChild равно null.

Например, document.body.lastChild.nodeType.

previousSibling. Данное свойство позволяет обратиться к элементу дерева, который расположен слева от текущего элемента (расположен над данным тегом на веб-странице). То есть с помощью данного свойства можно обратиться к предыдущему брату текущего тега среди всех дочерних тегов родительского тега.

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

parentNode. Данное свойство позволяет обратиться к родительскому тегу текущего элемента веб-страницы, то есть вернуться на один шаг назад по дереву DOM.

Чтобы лучше понять действие перечисленных свойств, посмотрите на рис. 3.8.

getElementById. Перечисленные выше свойства позволяют последовательно получить доступ к любому дочернему тегу внутри веб-страницы. Но последовательный перебор вложенных тегов довольно утомителен для разработчика. Куда проще было бы просто указать идентификатор нужного тега. Что и можно сделать с помощью данного метода.

С помощью метода getElementById можно сразу обратиться к любому тегу на веб-странице, для которого установлен атрибут id. Для этого достаточно воспользоваться вызовом: document.getElementById(“идентификатор”).