No setAttribute or getAttribute in editing HTML in the Console Panel

Question

I would like to try to set Attribute in the Console Panel in Chrome.

But without using with the mouse. Example like this: https://developers.google.com/web/updates/2015/08/edit-html-in-the-console-panel

I wish only to write the JS-CODE with command, for example:

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

In the Console Panel Chrome this function setAttribute is not able. Please is there some alternativ way to write CODE with setting Attribute?

Answer 1

document.querySelectorAll returns a static nodelist, So need to iterate this collection which will give access to the element.Then setAttribute can be use to set an attribute

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">