创建节点

假设我们要编写一个脚本，将文档中的所有图像（<img>标签）替换为其alt属性中的文本，该文本指定了图像的文字替代表示。

这不仅涉及删除图像，还涉及添加新的文本节点，并替换原有图像节点。为此我们使用document.createTextNode方法。

<p>The <img src="img/cat.png" alt="Cat"> in the
  <img src="img/hat.png" alt="Hat">.</p>
<p><button onclick="replaceImages()">Replace</button></p>
<script>
  function replaceImages() {
    let images = document.body.getElementsByTagName("img");
    for (let i = images.length - 1; i >= 0; i--) {
      let image = images[i];
      if (image.alt) {
        let text = document.createTextNode(image.alt);
        image.parentNode.replaceChild(text, image);
      }
    }
  }
</script>

给定一个字符串，createTextNode为我们提供了一个文本节点，我们可以将它插入到文档中，来使其显示在屏幕上。

该循环从列表末尾开始遍历图像。我们必须这样反向遍历列表，因为getElementsByTagName之类的方法返回的节点列表是动态变化的。该列表会随着文档改变还改变。若我们从列表头开始遍历，移除掉第一个图像会导致列表丢失其第一个元素，第二次循环时，因为集合的长度此时为 1，而i也为 1，所以循环会停止。

如果你想要获得一个固定的节点集合，可以使用数组的Array.from方法将其转换成实际数组。

let arrayish = {0: "one", 1: "two", length: 2};
let array = Array.from(arrayish);
console.log(array.map(s => s.toUpperCase()));
// → ["ONE", "TWO"]

你可以使用document.createElement方法创建一个元素节点。该方法接受一个标签名，返回一个新的空节点，节点类型由标签名指定。

下面的示例定义了一个elt工具，用于创建一个新的元素节点，并将其剩余参数当作该节点的子节点。接着使用该函数为引用添加来源信息。

<blockquote id="quote">
  No book can ever be finished. While working on it we learn
  just enough to find it immature the moment we turn away
  from it.
</blockquote>
<script>
  function elt(type, ...children) {
    let node = document.createElement(type);
    for (let child of children) {
      if (typeof child != "string") node.appendChild(child);
      else node.appendChild(document.createTextNode(child));
    }
    return node;
  }
  document.getElementById("quote").appendChild(
    elt("footer", "—",
        elt("strong", "Karl Popper"),
        ", preface to the second editon of ",
        elt("em", "The Open Society and Its Enemies"),
        ", 1950"));
</script>