Создание узлов.

В следующем примере нам надо сделать скрипт, заменяющий все картинки (тег <img>) в документе текстом, содержащимся в их атрибуте alt, который задаёт альтернативное текстовое представление картинки.

Для этого надо не только удалить картинки, но и добавить новые текстовые узлы им на замену. Для этого мы используем метод document.createTextNode.

<р>Это <img src="img/cat.png" alt="Кошка"> в.

<img src="img/hat.png" alt="сапожках">.</p>

<p><button onclick="replaceImages()">Заменить</buttоn></р>

<script>

Function replaceImages() {

Var images = document.body.getElementsByTagName("img");

For (var i = images.length - 1; i >= 0; i--) {

Var image = images[i];

If (image.alt) {

Var text = document.createTextNode(image.alt);

Image.parentNode.replaceChild(text, image);

}

}

}

</script>

Получая строку, createTextNode даёт нам тип 3 узла DOM (текстовый), который мы можем вставить в документ, чтобы он был показан на экране.

Цикл по картинкам начинается в конце списка узлов. Это сделано потому, что список узлов, возвращаемый методом getElementsByTagName (или свойством childNodes) постоянно обновляется при изменениях документа. Если б мы начали с начала, удаление первой картинки привело бы к потере списком первого элемента, и во время второго прохода цикла, когда i равно 1, он бы остановился, потому что длина списка стала бы также равняться 1.

Если вам нужно работать с фиксированным списком узлов вместо «живого», можно преобразовать его в настоящий массив при помощи метода slice.

Var arrayish = {0: "один", 1: "два", length: 2};

Var real = Array.prototype.slice.call(arrayish, 0);

Real.forEach(function(elt) { console.log(elt); });

// → один.

// два.

Для создания узлов-элементов (тип 1) можно использовать document.createElement. Метод принимает имя тега и возвращает новый пустой узел заданного типа. Следующий пример определяет инструмент elt, создающий узел-элемент и использующий остальные аргументы в качестве его детей. Эта функция потом используется для добавления дополнительной информации к цитате.

<blockquote id="quote">

Никакая книга не может быть закончена. Во время работы над ней мы узнаём достаточно для того, чтобы найти её незрелой сразу же после того, как мы отвлеклись от неё.

</blockquote>

<script>

Function elt(type) {

Var node = document.createElement(type);

For (var i = 1; i < arguments.length; i++) {

Var child = arguments[i];

If (typeof child == "string").

Child = document.createTextNode(child);

Node.appendChild(child);

}

Return node;

}

Document.getElementById("quote").appendChild(

Elt("footer", "—",

Elt("strong", "Карл Поппер"),

", предисловие ко второму изданию ",

Elt("em", "Открытое общество и его враги "),

", 1950"));

</script>