创建节点
假设我们要编写一个脚本,将文档中的所有图像(<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>