javascript - 在Javascript中对节点列表上的每个项目执行一个函数

Question

我想在我的页面中<img>为每个<td>带有特定 CSS 类的标签添加一个。我使用“querySelectorAll”来查找它们，如下所示：

var painted = document.querySelectorAll('.painted');

现在我想为它们中的每一个添加一个具有唯一 ID 的特定图像。我假设我需要以某种方式遍历列表并编辑每个元素的 innerHTML，任何人都可以为此提供语法吗？

谢谢

Answer 1

只需像正常for循环一样运行它，并为每个元素添加属性。

for (var i = 0, len = painted.length; i < len; i++) {
    painted[i].id = "foo" + i;
    painted[i].innerHTML = "<strong>Your content</strong>";
}

这用于innerHTML创建新内容。如果您需要更复杂的内容处理，那么没有单一的语法。您需要学习 DOM API 并执行所需的操作。

例如，如果您想添加一张图片，您可以创建一张并直接附加它。

for (var i = 0, len = painted.length; i < len; i++) {
    var img = document.createElement("img");
    img.id = "myimage" + i;
    painted[i].appendChild(img);
}

请注意，我没有使用 HTML 标记。DOM 节点没有“HTML 内容”。它是对象树结构的一部分，因此它有子节点，子节点有自己的子节点，依此类推。

所以你需要做的，是以当前painted元素为根执行一些 DOM 选择，并决定应该去哪里。