DOM属性访问:为什么"elt.class"不起作用？

Question

我有这个javascript代码:

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

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

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

它工作....

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

这是本机javascript DOM中的错误吗？谁能解释为什么会这样或者我做错了什么？谢谢.所有输入/答案将不胜感激.

Answer 1

属性和属性是不同的东西.属性是您在文档代码中看到的字符串,可通过DOM Core方法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中定义),并且通常是更易读的便利设施.虽然它们通常反映与属性相同的东西,但它们在名称,价值,类型或目的方面可能不同.

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输入反映了表单字段的当前内容; 同名的属性是defaultValue/ defaultSelected/ defaultChecked初始值.

[旁白:IE <8在描述属性和属性之间的区别时确实很麻烦,并且getAttribute在它们不同的所有情况下都会返回错误的东西.不要让这让您感到困惑,并且因此而避免getAttribute用于访问HTML DOM属性.]