Страница 1 из 5
В этой статье будут рассмотрены некоторые из таких методов и будут приведены примеры их практического применения. О тех методах, которые не разобраны в данной статье, вы можете прочесть в документации на официальном сайте фреймворка http://prototypejs.org/api/element/methods.
На текущий момент мы ознакомились уже с основными из них, это методы:
- update() - применяется для обновления HTML –элементов.
- select(), up(), down(), previous() и next() – используются для перехода к новым элементам близким к текущему.
- insert() – применяется для вставки нового элемента в DOM.
- remove() – используется для удаления указанного элемента (и его дочерних элементов) из DOM.
- hide() и show() – применяют для сокрытия или отображения указанных DOM-элементов.
Чтение и изменение контента объектов
В первую очередь давайте рассмотрим способы изменения внутреннего контента элементов средствами Prototype. Разберем методы чтения и записи контента в элемент. Далее переедем к вопросу работы с атрибутами элементов.
Работа с атрибутами входит в число небезопасных, так как любая неверная корректировка их значений может привести к некорректному отображению html-документа в целом. Данные методы будут наиболее полезны при работе с нестандартными атрибутами.
Обновление контента элемента
Для изменения контента элемента необходимо произвести вызов метода update(). Метод может быть вызван без аргументов, либо с одним аргументом. В первом случае контент элемента будет попросту удален, во тором обновлен (заменен) тем который указан в качестве аргумента.
Метод update() допускает использование различных типов данных в качестве первого аргумента. Это может быть обычный текст, HTML-разделитель или даже JavaScript объект.
Следующий пример демонстрирует базовые возможности метода update(). В этом примере, элемент DIV содержит некоторый текст, но при просмотре этой страницы в браузере текста не будет.
<html>
<head>
<title>Удаляем конетнт элемента методом update()</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="foo">
Этот текст будет удален!
</div>
<script type="text/javascript">
$('foo').update();
</script>
</body>
</html>
Если задача стоит в том, чтобы заменить определенный контент новым (а не удалять его, как в примере выше), необходимо вызвать метод update() с новым контентом в качестве первого аргумента. И как уже было отмечено выше, вы вправе использовать различные типы данных для этих целей. В следующем примере давайте реализуем этот механизм:
<html>
<head>
<title>Изменение контента элемента</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="foo">
Вы не увидите этот текст!
</div>
<script type="text/javascript">
$('foo').update('Вы увидите эту строку!');
</script>
</body>
</html>
Аналогично обстоят дела при использовании HTML тегов в качестве аргумента:
<html>
<head>
<title>Обновление элемента HTML строкой</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="foo">
Вы не увидите этот текст!
</div>
<script type="text/javascript">
$('foo').update('На экране будет следующее <a href="http://www.example.com">Ссылка</a>');
</script>
</body>
</html>
В первой статье “Введение в Prototype” были рассмотрены методы создания объектов – сущностей класса Element. Любой из созданных таким способом объектов может выступать в качестве аргумента метода update(). Это альтернативы вызову метода insert() для вставки нового элемента в DOM.
В четвертом примере создадим объект – гиперссылку и добавим ее к элементу #foo.
В четвертом примере создадим объект – гиперссылку и добавим ее к элементу #foo.
<html>
<head>
<title>Вставка элемента через update()</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="foo">
Вы не увидите этот текст!
</div>
<script type="text/javascript">
var link = new Element('a', { href : 'http://www.example.com' });
link.update('Текст ссылки');
$('foo').update(link);
</script>
</body>
</html>
Стоит знать, что метод update() реализован в Prototype таким образом, что в качестве его аргумента может выступать любой объект, экземпляр класса, в котором реализован метод toString(). Как это все выглядит на практике, будет рассмотрено в одной из следующих статей о Prototype.
Чтение контента элемента
В некоторых случаях нет необходимости изменять конетнт элемента, а нужно просто прочесть его содержимое. В Prototype это реализовано через обращение к innerHTML свойству элемента.
В следующем примере будет произведено чтение контента объекта HTML-документа.
Чтение контента элемента
В некоторых случаях нет необходимости изменять конетнт элемента, а нужно просто прочесть его содержимое. В Prototype это реализовано через обращение к innerHTML свойству элемента.
В следующем примере будет произведено чтение контента объекта HTML-документа.
<html>
<head>
<title>Чтение inner HTML конетнет html элемента</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="foo">
<a href="http://www.example">Ссылка!</a>
</div>
<script type="text/javascript">
alert($('foo').innerHTML);
</script>
</body>
</html>