Рубрика «JavaScript»

Общее представление о DOM. Часть 4

Клонирование элементов

Вместо того, чтобы создавать каждый раз новые узлы, вы можете клонировать уже существующие узлы, используя метод cloneNode(), доступный для каждого узла. Клонировать можно только сам узел и его атрибуты или же все порожденные им узлы (а также все порожденные ими узлы и т.д.). Если указать логическое значение true в качестве параметра метода cloneNode(), то клонируются и порожденные узлы (это так называемая детальная копия). А если указать логическое значение false, то клонируется только сам узел.

<script type="text/javascript">
var nr = 1;
function addItem(cloneMode) {
  var list = document.getElementById("list");
  var oldItem = list.firstChild;
  var newItem = oldItem.cloneNode(cloneMode);
  list.appendChild(newItem);
}
</script>
<ul id="list"><li><a href="http://www.samspublishing.com/">Item 1</a></li></ul>
<input type="button" onclick="addItem(true);" value="Clone all" />
<input type="button" onclick="addItem(false);" value="Clone node only" />

После щелчка на первой кнопке клонируется весь узел, включая такие подэлементы, как ссылка и текстовое обозначение элемента списка. А после щелчка на второй кнопке клонируется только сам узел, формируя новый, хотя и пустой элемент списка.

Замена элементов

Если требуется удалить узел, а затем вставить новый узел на том же месте, наиболее рационально это можно сделать с помощью метода replaceChild(). Нужно лишь указать новый и старый узел, а все остальное будет сделано автоматически. Следует, однако, иметь в виду, что данный метод вызывается из элемента, который является родительским по отношению к новому и старому узлу!

<script type="text/javascript">
var nr = 1;
function addItem() {
  var list = document.getElementById("list");
  var newNode = document.createElement("li");
  nr++;
  var newTextNode = document.createTextNode("Item " + nr);
  newNode.appendChild(newTextNode);
  list.replaceChild(newNode, list.firstChild);
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();" value="Replace item" />

Изменение фрагментов кода HTML

При изменении текстовых узлов (путем замены или с помощью свойства nodeValue) меняется лишь конкретный текст, но не целые фрагменты кода HTML, включая и подэлементы. В последнем случае может оказаться полезным свойство innerHTML каждого элемента. Несмотря на то, что свойство InnerHTML не стандартизировано, оно вполне работоспособно. С помощью этого свойства можно изменить любой элемент HTML и даже предоставить новые подэлементы:

<script type="text/javascript">
var nr = 1;
function addItem() {
  var list = document.getElementById("list");
  nr++;
  var newNode = "<li>Item " + nr + "</li>";
  list.innerHTML += newNode;
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();" value="Add item" />

Итак, вместо ясного, но неудобного подхода DOM свойство innerHTML просто записывает код HTML в один элемент.

Общее представление о DOM. Часть 3

Добавление элементов

Для создания узлов DOM служит метод document.createElement(). Он создает новый элемент, используя имя дескриптора, предоставляемое в качестве параметра. Вновь созданный элемент может быть затем введен в иерархическое дерево DOM. Чаще всего для этой цели используется метов appandChild(), присоединяющий порожденный узел в конце списка подобных узлов.

В приведенном ниже фрагменте кода новый пустой элемент <li> вводится в конце списка <ul> после каждого щелчка на соответствующей кнопке.

<script type="text/javascript">
function addItem() {
  var list = document.getElementById("list");
  var newNode = document.createElement("li");
  list.appendChild(newNode);
}
</script>
<ul id="list"><li>Item</li></ul>
<input type="button" onclick="addItem();" value="Add item" />

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

В приведенном ниже коде новый элемент <li> вставляется в начале списка после каждого щелчка на соответствующей кнопке.

<script type="text/javascript">
function addItem() {
  var list = document.getElementById("list");
  var newNode = document.createElement("li");
  list.insertBefore(newNode, list.firstChild);
}
</script>
<ul id="list"><li>Item</li></ul>
<input type="button" onclick="addItem();" value="Add item" />

Создание текстовых элементов

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

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

<script type="text/javascript">
var nr = 1;
function addItem() {
  var list = document.getElementById("list");
  var newNode = document.createElement("li");
  nr++;
  var newTextNode = document.createTextNode("Item " + nr);
  newNode.appendChild(newTextNode);
  list.appendChild(newNode);
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();" value="Add item" />

Работа с атрибутами

До сих пор мы рассматривали обычные дескрипторы и текстовые узлы. Но картина была бы неполной без еще одной главной составляющей — атрибутов. Доступ к значению атрибута осуществляется с помощью метода getAttribute(). Добавить новый атрибут или изменить существующий можно с помощью метода setAttribute(), указав лишь имя атрибута и его значение. В приведенном ниже коде содержимое новых элементов <li> задается в виде гиперссылки с помощью устанавливаемого атрибута href.

<script type="text/javascript">
var nr = 1;
function addItem() {
  var list = document.getElementById("list");
  var newNode = document.createElement("li");
  var newLink = document.createElement("a");
  newLink.setAttribute("href", "http://www.server.com/");
  nr++;
  var newTextNode = document.createTextNode("Item " + nr);
  newLink.appendChild(newTextNode);
  newNode.appendChild(newLink);
  list.appendChild(newNode);
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();" value="Add item" />

Просмотр изображений и фотогалерея

Lightbox 2 — простой скрипт для удобного просмотра изображений на страницах вашего сайта. Прост в установке и работает во всех популярных браузерах. Пример работы можно посмотреть здесь. Подключение самой библиотеки выполняется в два шага:

Установка

Lightbox использует библиотеки Prototype и Scriptaculous. Вы должны подключить их в разделе head HTML-страницы:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Далее необходимо подключить стили отображения для окна просмотра::

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Активация

Для того чтобы картинка открывалась при помощи Lightbox, нужно добавить атрибут rel=”lightbox” в тег ссылки на картинку. Заголовок, если таковой требуется, можно разместить в атрибуте title. Например, так:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Если необходимо разместить несколько логически связанных изображений и организовать навигацию между ними в окне просмотра, то нужно разместить в аттрибуте rel=”lightbox” название группы в квадратных скобках для каждого связанного изображения. Например:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

На странице может быть размещено несколько фотогалерей и каждая из них может содержать любое число изображений.

Предыдущая версия библиотеки LightBox реализована без применения сторонних библиотек. В ней нет анимации и нет возможности просмотра нескольких связанных изображений.

Скачать Lightbox JS v2.04