for循环在HTML中的document.getElementsByName中

问题描述 投票：2回答：6

我试图通过elementName使用以下Javascript代码访问每个节点：

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演示的链接

javascript jquery html xml xslt
6个回答
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>
1
投票

正如你已经标记了jQuery我已经创建了一个jQuery片段，它将完成与你所追求的相同的事情。这里的好处是myFunction不需要定义，一般来说代码较少。这是jsFiddle

jQuery的

$("document").ready(function () {
    $("button").click(function () {
        $("[name='demoNode']").each(function (elem) {
            $(this).addClass("democlass");
        });
    });
});
1
投票

而不是for loop你也可以使用map：

但首先我们需要将NodeList的实例转换为数组，因为document.getElementsByName返回nodelist。

function myFunction() {
  var h1 = document.getElementsByName("demoNode");
  Array.prototype.map.call(h1, (key) => key.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>
0
投票

首先，您的代码包含很少的语法错误。

您不能通过简单地使用.来检索或设置元素的属性。所以下面的代码是错误的h1[i].name，它应该是这样的：

var val = h1[1].getAttribute("name");
   or
h1[1].setAttribute("name", "value");

另一个是你不需要创建类属性，因为它始终包含在每个元素中。所以你可以简单地为它分配你的类名。

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>
0
投票

你也可以使用HTMLElement的属性classList和它的方法add。 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

function myFunction() {
   var h1 = document.getElementsByName("demoNode");
   for (var i = 0; i < h1.length; i++) {
         h1[i].classList.add('democlass');
   }
}
 .democlass {
    color: red;
 }
<!DOCTYPE html>
      <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中的JS选择加载类型“In head”以使您的函数可用。 https://jsfiddle.net/8s5fw33e/

0
投票

正如其他人所说，检查是多余的。

首先，用于检查属性名称值的if条件为false。要获取属性值，请使用getAttribute("attribute_name")。第二部分不起作用的是h1[i].createAttribute()

function myFunction() {
   var h1 = document.getElementsByName("demoNode");
   for (var i = 0; i < h1.length; i++) {
   if (h1[i].getAttribute("name") == "demoNode") {
     var att = document.createAttribute("class");
     att.value = "democlass";
     h1[i].setAttributeNode(att);
   }
   }
}
//myFunction();
.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.