在控制台面板中编辑HTML时没有setAttribute或getAttribute

Question

我想尝试在Chrome中的控制台面板中设置属性。

但不使用鼠标。像这样的例子： https://developers.google.com/web/updates/2015/08/edit-html-in-the-console-panel

我希望只用命令编写JS-CODE，例如：

document.querySelectorAll(".serial-number").setAttribute("Value","dummy");

在控制台面板Chrome中，此功能无法使用setAttribute。请问有什么替代方法可以通过设置属性来编写CODE吗？

Answer 1

document.querySelectorAll返回一个静态nodelist，因此需要迭代此集合才能访问该元素。然后setAttribute可用于设置属性

var getAllLI = document.querySelectorAll('.demoClass');
getAllLI.forEach(function(item, index) {
  item.setAttribute('value', index)
})

<input class="demoClass">
<input class="demoClass">
<input class="demoClass">
<input class="demoClass">