Скрытие и отображение

Введение

HTML и JavaScript

Заключение

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

Эта лекция рассказала об основных инструментах такой работы. Вы можете теперь легко перемещаться по DOM, используя document, чтобы получить доступ к корню DOM, и childNodes и parentNode для перехода к ближайшим непосредственным связанным узлам. Вы можете пропускать промежуточные узлы и исключать жесткое кодирование длинных и громоздких путей доступа с помощью getElementById и getElementsByTagName для создания своих собственных сокращений. Но возможность побродить по своему дереву является только началом.

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

В этой лекции рассматриваются основы использования JavaScript для управления контентом страницы, включая отображение и скрытие частей страницы, добавление нового кода HTML и его удаление. В конце вы поймете, что наиболее фундаментальной вещью, для чего используется JavaScript, является изменение контента страницы, и вы узнаете, как лучше всего это делать.

Лекция имеет следующее содержание:

· Скрытие и отображение

Пример скрытия и отображения

§ Регулярные выражения

§ Соединение работающего кода со страницей

· Создание HTML

Легче всего начать с управления кодом HTML, который уже имеется, скрывая или отображая элементы, которые находятся на странице. Для этого можно использовать JavaScript, который позволяет изменять стили элементов. Стили CSS уже являются мощным средством описания внешнего вида элемента, и одной из составляющих того, как выглядит элемент, является вопрос, отображается ли элемент вообще. Свойство CSS display является ключом для отображения и скрытия элемента: если задать его как display:none;, элемент будет скрыт. Представьте параграф следующего вида:

<p id="mypara" style="display: none">I am a paragraph</p>

Этот параграф будет невидим на странице. JavaScript позволяет динамически добавлять стиль display: none для элемента и удалять его.

JavaScript предоставляет возможность получить ссылку на элемент HTML. Например, var el = document.getElementById("nav"); выдает ссылку на элемент с id="nav". Когда ссылка на элемент получена, можно с помощью атрибута style изменить примененный к нему код CSS. Например, параграф "mypara" выше в настоящий момент скрыт (в нем задано display: none). Чтобы показать его, задайте атрибут стиля display как block:

var el = document.getElementById('mypara');el.style.display = 'block';

И вот, параграф появился. Задание CSS на элементе через атрибут style делает то же самое, что задание его в атрибуте style в самом HTML, поэтому код выше, задающий el.style.display = 'block', добивается того же эффекта, что и размещение style="display: block" прямо в коде HTML. За исключением того, что он является динамическим. Скрытие любого элемента также просто:

var el = document.getElementById('mypara');el.style.display = 'none';