javascript - HTML 中 document.getElementsByName 中的 for 循环

Question

我正在尝试使用以下 Javascript 代码通过 elementName 访问每个节点:

function myFunction() {
  var h1 = document.getElementsByName("demoNode");
  for (var i = 0; i < h1.length; i++) {
    if (h1[i].name == "demoNode") {
      var att = h1[i].createAttribute("class");
      att.value = "democlass";
      h1[i].setAttributeNode(att);
    }
  }
}

.democlass {
  color: red;
}

<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>

<p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>

<button onclick="myFunction()">Try it</button>

代码应将标题文本着色为红色。但它似乎不适合我。你能告诉我为什么吗？这是来自 jsfiddle 的演示链接

Answer 1

• 要获取名称的属性值，请使用 h1[i].getAttribute("name")
• 要设置属性类，使用h1[i].setAttribute("class","democlass")

此外，您不需要 if 条件，因为您获取的元素已经在使用名称。

function myFunction() {
  var h1 = document.getElementsByName("demoNode");
  for (var i = 0; i < h1.length; i++) {
     h1[i].setAttribute("class", "democlass");
  }
}

.democlass {
  color: red;
}

<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>
<h1 name="demoNode">Hello World</h1>

<p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>

<button onclick="myFunction()">Try it</button>