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

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

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

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

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

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

<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>