javascript - DOM 属性访问 : why is "elt.class" not working?

Question

我有这个 javascript 代码:

var elt = document.createElement("div");
elt.class = "class_1";

在我的 CSS 中应该有一个与 .class_1 关联的样式，但由于某些原因它并没有真正应用。在花了几个小时弄清楚出了什么问题之后，我尝试了这个替代方案:

elt.setAttribute("class", "class_1");

它奏效了....

这很奇怪，因为在我的代码的另一部分，我使用了 elt.id 并且它工作得很好。起初我以为这是一个跨浏览器的问题，但事实证明 "elt.class" 并不适用于所有浏览器。

这是原生 javascript DOM 中的错误吗？有人可以解释这是为什么还是我做错了什么？谢谢。所有输入/答案将不胜感激。

Answer 1

属性和属性是不同的东西。属性是您在文档代码中看到的字符串，可通过 DOM Core method getAttribute 访问任何类型的文档。 :

<a id="foo" href="bar" tabindex="1" onclick="alert()" class="bof" potato="lemon">

a.getAttribute('id')         // string "foo"
a.getAttribute('href')       // string "bar"
a.getAttribute('tabindex')   // string "1"
a.getAttribute('onclick')    // string "alert()"
a.getAttribute('class')      // string "bof"
a.getAttribute('potato')     // string "lemon"

而可直接在对象上访问的属性是专门的和特定于文档类型的(例如在 DOM HTML 或 HTML5 中定义)并且通常是更具可读性的便利设施。尽管它们通常反射(reflect)与属性相同的事物，但它们在名称、值、类型或用途方面可能有所不同。

a.id                         // string "foo"
a.href                       // string "http://www.example.com/base/bar"
a.tabIndex                   // integer 1
a.onclick                    // function() { alert(); }
a.className                  // string "bof"
a.potato                     // undefined

因此，虽然 id 产生相同的值，但 href 和所有其他 URL 属性相对于文档得到绝对化； tabIndex 和其他数字属性返回数字而不是文字字符串； onclick 和其他事件处理程序属性返回一个 JS Function 对象，而其名称恰好与 class 等常见保留字冲突的属性(不仅仅是 JavaScript 保留字，因为 DOM 是跨语言标准)被重命名(另请参阅:htmlFor)，并且非标准属性根本无法作为属性访问。其他陷阱:输入的value/selected/checked反射(reflect)了表单字段的当前内容；同名属性为defaultValue/defaultSelected/defaultChecked初始值。

[旁白:IE<8 很难分辨属性和特性之间的区别，并且在所有不同的情况下都会为 getAttribute 返回错误的内容。不要让这让您感到困惑，因此请避免使用 getAttribute 访问 HTML DOM 属性。]