时间戳

首页 > 解决方案 > 为什么要使用属性节点？

javascript - 为什么要使用属性节点？

问题描述

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

学习如何设置属性、获取属性、删除属性

需要知道为什么以及何时使用它？

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

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

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

标签： javascriptdomattributes

解决方案

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从节点中删除整个属性，因此如果由于某种原因需要发生，这是您的首选方法。

推荐阅读