Question

这是使用属性节点的示例。在JavaScript中访问DOM时为什么需要使用属性节点

了解如何设置setAtttribute，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节点本身就是您已分配给可变企鹅的对象（但应在使用前分配它）。

一个常见的用例与在节点上存储数据位有关。您可以设置该信息并在以后检索。

说你有两只企鹅。

<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() versus Element object properties?

上查看有关此问题的更多讨论。

removeAttribute()只是删除任何属性，而不是将其设置为null。在官方文档中说应该使用removeAttribute()而不是直接或使用setAttribute（）将属性值设置为null。如果将它们设置为null，许多属性将不会表现出预期的效果。

为什么使用属性节点？

2 个答案: