Привет,
мир!
Моя
первая
Моя
первая
вэб-страничка!
HTML-
страничка!
5. Основы HTML
91
иерархии. О том, как менять структуру документа, мы узнаем позже,
в девятой главе.
На рис. 5.8 показан другой способ изображения иерархии HTML —
в виде вложенных прямоугольников.
html
head
title
body
h1
p
Рис. 5.8. Иерархия HTML в виде вложенных прямоугольников
Добавим в HTML ссылки
Ранее в этой главе мы узнали, что HTML — гипертекстовый язык. Это
значит, что HTML-документы могут содержать гиперссылки (или просто
ссылки), ведущие на другие веб-страницы. Такие ссылки можно созда-
вать с помощью элемента
a (от английского anchor — «якорь»).
Измените свой HTML-документ, чтобы он соответствовал следу-
ющему примеру: удалите второй элемент
p, а также теги em и strong
и добавьте выделенный цветом код, чтобы создать ссылку на интернет-
адрес
http://comicsia.ru/collections/xkcd:
Моя первая настоящая HTML-страничка
Привет, мир!
92
Часть I. Основы
Моя первая веб-страничка.
"http://comicsia.ru/collections/xkcd"
>Нажмите
сюда, чтобы почитать отличные комиксы.
Привет, мир!
Моя первая веб-страничка.
Виселица!
<br /><h2>
<br /><i>Рис. 9.1. DOM-дерево простого HTML-документа, </i>
<br /><i>наподобие созданного нами в пятой главе</i>
<br />Идентификация элементов по id
<br />HTML-элементу можно присвоить уникальное имя, или <i>идентифи-</i>
<br /><i>катор</i>, с помощью атрибута id. Например, у элемента h1 задан атри-
<br />бут
<br />id:
<br /><h2>
<br />"main-heading"
<br />>Привет, мир!</h2>
<br />Задав атрибуту
<br />id значение (в данном случае "main-heading"), мы
<br />получаем возможность впоследствии найти этот конкретный заголовок
<br />по его
<br />id и что-нибудь с ним сделать, не затрагивая остальные элементы,
<br />даже если это другие заголовки уровня
<br />h1.
<br />Поиск элемента с помощью getElementById
<br />Обозначив элемент уникальным
<br />id (каждый id в документе должен
<br />иметь собственное, отличное от других значение), мы можем восполь-
<br />зоваться DOM-методом
<br />document.getElementById, чтобы найти эле-
<br />мент
<br />"main-heading":
<br />var
<br />headingElement
<br />=
<br />document
<br />.
<br />getElementById
<br />(
<br />"main-heading"
<br />);
<br />Вызовом
<br />document.getElementById("main-heading") мы даем
<br />браузеру команду отыскать элемент,
<br />id которого равен "main-heading".
<br />Main
<br />heading
<br />—
<br />главный
<br />заголовок
<br />Get element
<br />by ID
<br />—
<br />получить
<br />элемент по ID
<br /></div> <style type="text/css"> </style> <hr /><div id="page147-div" >
<br />9. DOM и jQuery
<br />147
<br />Этот вызов вернет DOM-объект с соответствующим
<br />id, и мы
<br />сохраним этот объект в переменной
<br />headingElement.
<br />Когда элемент найден, им можно управлять при
<br />помощи JavaScript-кода. Например, через свойство
<br />innerHTML мы можем узнать, что за текст находится вну-
<br />три элемента, или заменить этот текст:
<br />headingElement.
<br />innerHTML
<br />;
<br />Эта команда возвращает содержимое
<br />headingElement —
<br />элемента, который мы нашли с помощью
<br />getElementById.
<br />В данном случае содержимое — это текст
<br />"Привет, мир!",
<br />находящийся между тегов
<br /></h2></body>Достарыңызбен бөлісу: |
