Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб программирование.Начало пути.doc
Скачиваний:
0
Добавлен:
04.01.2020
Размер:
7.81 Mб
Скачать

Коллекции

Объект document предоставляет доступ к отдельным элементам Web-страницы. Если элемент страницы имеет уникальное имя, заданноечерез id, то можно использовать обращение как к отдельному объекту:

image1.innerHTML или image1.outerHTML;

В остальных случаях обращение происходит через коллекции. Кол­лекция – это объект, который используется для хранения других объек­тов и отличается от ассоциативного массива наличием свойств и методов. Все коллекции имеют свойство length - количество элементов. Коллекция document.all содержит все используемые в документе элементы. Рассмотрим пример:

<!DOCTYPE HTML SYSTEM>

<html> <head>

<title>Документ</title>

<script type=text/javascript>

function find()

{

var tag, tags="На странице теги:";

var n=document.all.length;

for(i=0;i<n;i++){

tag=document.all(i).tagName;

tags=tags+"\r"+tag;

}

alert(tags);}

</script>

</head>

<body onload = "find()">

<h1>DOM1</h1>

<div id="footer">My production ©</div>

</body> </html>

К элемен­там коллекции можно обращаться по номеру в HTML-коде или по имени, например document.all(8) или document.all("imge1"). Элементы коллекции нумеруются с нуля. Коллекция all имеет дополнительный метод tags, позволяющий фильтровать элементы коллекции по их тегу. Следующее выражение вернет ссылку на коллекцию, содержащую только заголовки первого уровня document.all.tags("H1")

Рассмотрим коллекцию images, которую включает объект document. Получить доступ к ее элементам можно по порядковому номеру или ключу.

document.images.item(1);

document.images.item("iamge1") ;

Индекс элемента коллекции помещается не в квадратных, а в круг­лых скобках, потому что он является аргументом метода item(), поддер­живаемого всеми коллекциями. Имя этого метода можно опускать.

document.images(1);

document.images("image1");

<script type="text/javascript">

var someImage = document.images("image1");

</script>

Метод getElementByTagName возвращает коллекцию элементов, созданных посредством тега, переданного в качестве параметра. Пример:

document.getElementByName("someImage")

document.getElementByTagName("H1")

Свойства элемента innerHtml и outerHtml

Свойство innerHTML содержит HTML-код между открывающим и закрывающим тегами. С помощью этого свойства можно работать с кодом внутри тега, как со строкой. Отличие свойства outerHTML в том, что это свойство включает в себя не только HTML-код между открывающим и закрывающим тегом, а также открывающий и закрывающий теги. Свойство outerHTML доступно для записи только после того, как весь документ загружен (произойдет событие window.onload). Ниже приведен пример использования свойства outerHTML. Когда пользователь щелкает по кнопке передачи формы на сервер, вместо кнопки появляется сообщение с благодарно­стью:

<INPUT TYPE="submit" VALUE="Отправить" onClick= "this.outerHTML ='Благодарим Вас за участие в нашем опросе.'">

Пример использования свойств innerHTML и outerHTML:

<!-- пример pr31: использование свойств -->

<html><head>

<script type="text/javascript">

function transformBody() {

var myPar = document.getElementById("myP");

myP.innerHTML = "<i>Hello, World!</i>";

myP.outerHTML = "<strong>" + myP.innerHTML

+ "</strong>";

}

</script>

</head>

<body onload="transformBody();">

<p id="myP">sample text</p>

</body> </html>

<!-- после выполнения функции структура элемента body будет:

<BODY><STRONG><I>Hello, World!</I></STRONG></BODY>

-->