Я пытаюсь получить доступ к каждому узлу по 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

2
Royeh 2 Мар 2018 в 14:41

6 ответов

Лучший ответ
  • Чтобы получить значение атрибута имени, используйте 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
void 2 Мар 2018 в 11:48

Прежде всего, ваш код содержит мало синтаксических ошибок.

Вы не можете получить или установить атрибуты элементов, просто используя .. Поэтому следующий код неправильный 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
Harun Diluka Heshan 2 Мар 2018 в 11:55

Вместо for loop вы также можете использовать map:

Но сначала нам нужно преобразовать экземпляр NodeList в массив, поскольку document.getElementsByName возвращает список узлов.

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>
1
Sahin Erbay 2 Мар 2018 в 12:09

Как утверждают другие, проверка является излишней.

Во-первых, условие if для проверки значения имени атрибута является ложным. Чтобы получить значение атрибута, вы используете getAttribute("attribute_name"). Вторая часть, которая не работает { { Х2 }}

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>
0
Bob 2 Мар 2018 в 12:05

Поскольку вы пометили jQuery, я создал фрагмент jQuery, который будет делать то же самое, что и вы. Преимущество здесь в том, что myFunction не нужно определять, и в целом это меньше кода. Вот jsFiddle

< Сильный > JQuery

$("document").ready(function () {
    $("button").click(function () {
        $("[name='demoNode']").each(function (elem) {
            $(this).addClass("democlass");
        });
    });
});
1
wmash 2 Мар 2018 в 12:08

Вы также можете использовать свойство classList из HTMLElement и его метод add. https://developer.mozilla.org/en-US/ Docs / Web / API / элемент / 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>

И вам нужно выбрать тип загрузки «In head» для JS в JSFiddle, чтобы сделать вашу функцию доступной. https://jsfiddle.net/8s5fw33e/

0
y_vyshnevska 2 Мар 2018 в 11:59