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>

Answer 2

您可以使用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>

Answer 3

当你标记了jQuery时，我创建了一个jQuery片段，它将完成与你所追求的相同的事情。这里的好处是if(randomColors.size()!=userColors.size()) { for (i = 0; i < randomColors.size(); i++) { if (randomColors.get(i) != userColors.get(i)) { Intent i = new Intent(GameActivity.this, GameOverActivity.class); startActivity(i); } } } userColors.clear(); } }不需要定义，一般来说代码较少。这是jsFiddle

<强>的jQuery

myFunction

Answer 4

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

您只需使用.即可检索或设置元素的属性。所以下面的代码是错误的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>

Answer 5

你也可以使用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/

Answer 6

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

首先，检查属性名称值的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>

for循环在HTML中的document.getElementsByName中

6 个答案: