HTML中document.getElementsByName中的for循环

罗耶

我正在尝试使用以下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的演示链接

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

另外,您不需要if条件,因为要获取的元素已经在使用name了。

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章