javascript - 在 Javascript 中对 Nodelist 上的每个项目执行函数

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 选择，并决定什么应该放在哪里。