javascript - 为什么我不能以相同的方式引用所有属性？

Question

我正在动态创建一个输入标记，它具有以下属性。

<input id='beep' id2='boop'></input>

虽然我可以通过下面两种语法之一来引用第一个

var tag = document.getElementById("beep");
alert(tag.id);
alert(tag.attributes["id"]);

当涉及到我的自定义属性id2时，我被迫使用后一种。为什么？

var tag = document.getElementById("beep");
alert(tag.id2); // doesn't work - I get *undefined*
alert(tag.attributes["id2"]);
alert(tag["id2"]); // doesn't work - I get *undefined*

Answer 1

您在这里混合了两种东西:HTML 和 DOM。 HTML 有标签和属性的概念，而 DOM 有节点和属性的概念，虽然它们看起来很相似，但它们是独立的技术(至少在其核心)。

在创建 DOM 元素时，只有官方 HTML 属性(甚至可能不是全部)会映射到 DOM 属性。在此过程中也可能会被修改。 DOM 中定义了 DOM 节点上可用的属性。和 HTML DOM specification .

input 元素的 value 属性示例:

When the type attribute of the element has the value "text", "file" or "password", this represents the current contents of the corresponding form control, in an interactive user agent. Changing this attribute changes the contents of the form control, but does not change the value of the HTML value attribute of the element. When the type attribute of the element has the value "button", "hidden", "submit", "reset", "image", "checkbox" or "radio", this represents the HTML value attribute of the element. See the value attribute definition in HTML 4.01.

或者 class HTML 属性，即 DOM 中的 className:

The class attribute of the element. This attribute has been renamed due to conflicts with the "class" keyword exposed by many languages. See the class attribute definition in HTML 4.01.

您可以通过 .getAttribute 访问所有 HTML 属性.