Почему вы используете узлы атрибутов?

Question

Это пример работы с узлами атрибута. Зачем мне нужно использовать узлы атрибутов, когда я обращаюсь к DOM в JavaScript

Изучаем, как устанавливать атрибуты, getAttribute, removeAttribute

Нужно знать, почему и когда я использую это?

if(document.getElementById("plc").hasAttribute("class"))
    penguin.setAttribute("class", "hidden");

var penguin = document.getElementById("plc");

alert(document.getElementById("plc").getAttribute("class"));

Answer 1

getAttribute, setAttribute и removeAttribute являются технически вызванными методами, и они воздействуют на узел DOM, манипулируя атрибутами. Сам DOM-узел - это то, что вы назначили своей переменной penguin (но ее следует назначить перед использованием).

Один из распространенных вариантов использования связан с хранением битов данных на узле. Вы можете установить эту информацию и получить ее позже.

Скажем, у вас есть пара пингвинов.

<div id='penguin-crowd'>
  <div class='penguin' data-species='emperor'></div>
  <div class='penguin' data-species='king'></div>
</div>

Теперь вы хотите перечислить их виды.

let penguins = document.getElementsByClassName('penguin');
for (let i = 0; i < penguins.length; i++) {
  let species = penguin[i].getAttribute('data-species');
  console.log(`This penguin's species is ${species}`);
}

Результат:

// This penguin's species is emperor
// This penguin's species is king

Добавить еще одного пингвина в толпу.

let penguinCrowd = document.getElementById('penguin-crowd');
let newPenguin = document.createElement('div');
newPenguin.classList.add('penguin');
newPenguin.setAttribute('data-species','emperor');
penguinCrowd.appendChild(newPenguin);

Теперь у вас есть

<div id='penguin-crowd'>
  <div class='penguin' data-species='emperor'></div>
  <div class='penguin' data-species='king'></div>
  <div class='penguin' data-species='emperor'></div>
</div>

removeAttribute, который удаляет весь атрибут из узла, поэтомуесли по какой-то причине это должно произойти, это ваш метод перехода.

Answer 2

setAttribute() для пользовательских атрибутов, которые вы создаете, т.е. node.className против node.userName. className - это стандартный атрибут, а userName - это пользовательский. Например, node.setAttribute('userName', 'someName') против node.className = 'someName'.

getAttribute() возвращает вам атрибуты DOM против свойств, таких как node.id. В большинстве случаев значения совпадают, но бывают случаи, когда они не совпадают. Например, проверенное свойство ввода: getAttribute() вернет checked/empty string, но input.checked вернется с true/false. В этом вопросе обсуждалось больше вопросов, которые вы можете проверить getAttribute () и свойства объекта Element?

removeAttribute() - просто удалить любой атрибут вместо установки null,В официальных документах говорится, что вы должны использовать removeAttribute() вместо установки значения атрибута на null либо напрямую, либо с помощью setAttribute (). Многие атрибуты не будут работать должным образом, если вы установите их в значение NULL.