Question

我了解到，通常最好使用DOM属性来设置，访问和修改属性，这使我避免使用setAttribute（）和getAttribute（）。是否有类似的方法可以在不使用removeAttribute（）的情况下删除DOM属性？

给出以下HTML代码：

<div id=el></div>

此JavaScript代码：

let el = document.getElementById('el');
console.log(el.outerHTML); //<div id='el'></div>
console.log(el.align === ''); //true
el.align = 'center';
console.log(el.outerHTML); //<div id="el" align="center"></div>
el.align = '';
log(el.outerHTML); //<div id="el" align=""></div>

似乎el.align默认设置为空字符串。在为el.align分配值后，为什么将el.align重置为空字符串不会从el.outerHTML演示文稿中删除align属性？这种方法是否同样有效？还是这会导致removeAttribute（）无法解决的问题？

Answer 1

您需要了解标记属性和DOM属性之间的区别。属性并不总是与JavaScript对象上的属性直接对齐。

Answer 2

IDL属性（属性）和相应的内容属性（标记）之间的映射取决于此接口定义语言的定义。

将某些IDL属性设置为false或null会删除它们，例如映射到boolean attributes的IDL属性，它们的简单存在表示一个真实值：

console.log(aud.loop);
console.log(aud.outerHTML);
aud.loop = false;
console.log(aud.outerHTML);

<audio id='aud' loop></audio>

但是，诸如keywords attributes之类的其他变量不会被删除，因为即使您设置的值即使不在有效关键字列表中也会被映射为无效的默认值，例如，如果您设置了无效值，则HTMLInputElement的type IDL将默认为“文本”，但是标记仍将显示该无效值。（在弃用之前，您的align属性是此类别的一部分。）

console.log(inp.type); // "number"

inp.type = "foobar"; // invalid
console.log(inp.type); // => default to "text
console.log(inp.outerHTML); // markup: "foobar"

inp.type = null; // invalid
console.log(inp.type); // => default to "text
console.log(inp.outerHTML); // markup: "null"

<input id="inp" type="number">

这是有道理的，因为即使浏览器无法将设置值识别为它们支持的值，也很可能会成为将来支持的值。

然后删除此类属性的唯一方法是使用Element.removeAttribute()方法。

其他将接受任何字符串作为有效值的属性也是如此，例如class（对于HTML，CSS具有更严格的规则），此处将IDL设置为任何值都会将其强制为字符串，它将映射到IDL className中的有效值。

console.log(el.className); // ""

el.className = null; // coerced to string
console.log(el.className); // "null"
console.log(el.outerHTML); // markup: "null"

el.className = false; // coerced to string
console.log(el.className); // "false"
console.log(el.outerHTML); // markup: "false"

el.className = ""; // ""
console.log(el.className); // ""
console.log(el.outerHTML); // markup: ""

<div id="el"></div>

无论属性是 missing 还是处于 invalid 状态，其中一些都有不同的默认值，这使得它们与IDL的关系更加模糊。

// crossOrigin IDL when no set is `null`.
console.log(img.crossOrigin);// attribute unset => IDL `null`

img.crossOrigin = 'use-credentials' // only non default valid value.
console.log(img.crossOrigin);
console.log(img.outerHTML);

img.crossOrigin = false; // invalid 
console.log(img.crossOrigin); // IDL defaults to "anonymous"
console.log(img.outerHTML); // markup is `"false"`

img.crossOrigin = null; // remove
console.log(img.crossOrigin);
console.log(img.outerHTML);

<img id="img">

最后，诸如HTMLInputElement.value之类的内容属性根本不会得到体现。

inp.value = "new value";
console.log(inp.outerHTML);

<input id="inp" value="initialValue">

因此，您需要搜索任何IDL属性的定义以确保其行为。

在JavaScript中：为什么不将标准属性的DOM属性设置为空字符串，则像Element.removeAttribute（）一样删除属性？

2 个答案: