javascript - 如何使用 Javascript 从 DOM 元素中删除属性？

Question

我正在尝试使用 javascript 从 DOM 节点中删除属性:

<div id="foo">Hi there</div>

首先我添加一个属性:

document.getElementById("foo").attributes['contoso'] = "Hello, world!";

然后我删除它:

document.getElementById("foo").removeAttribute("contoso");

除了属性仍然存在。

然后我尝试真的删除它:

document.getElementById("foo").attributes['contoso'] = null;

现在它是 null，这与它开始时不同，后者是 undefined。

从元素中删除属性的正确方法是什么？

jsFiddle playground

注意:将属性 contoso 替换为属性 required，您将了解 i'm trying to do. 的含义

状态表

                       foo.attributes.contoso  foo.hasAttribute("contoso")
                       ======================  ===========================
Before setting         undefined               false
After setting          Hello, world!           false
After removing         Hello, world!           false
After really removing  null                    false

Answer 1

不要使用 attributes 集合来处理属性。而是使用 setAttribute和 getAttribute :

var foo = document.getElementById("foo");

foo.hasAttribute('contoso'); // false
foo.getAttribute('contoso'); // null

foo.setAttribute('contoso', 'Hello, world!');

foo.hasAttribute('contoso'); // true
foo.getAttribute('contoso'); // 'Hello, world!'

foo.removeAttribute('contoso');

foo.hasAttribute('contoso'); // false
foo.getAttribute('contoso'); // null, 

// It has been removed properly, trying to set it to undefined will end up
// setting it to the string "undefined"