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

只有标准属性具有相关属性，id2是非标准属性，因此它没有关联属性。

Answer 2

你在这里混合两件事：HTML和DOM。 HTML具有标签和属性的概念，而DOM具有节点和属性的概念，虽然它们看起来很相似，但它们是独立的技术（至少在其核心）。

创建DOM元素时，只有官方HTML属性（可能甚至不是所有属性）都映射到DOM属性。也可能在此过程中进行修改。 DOM节点上可用的哪些属性在DOM和HTML DOM specification中定义。

value元素的input属性示例：

当元素的type属性具有值"text"，"file"或"password"时，这表示交互式用户中相应表单控件的当前内容剂。更改此属性会更改表单控件的内容，但不会更改元素的HTML value属性的值。当元素的type属性具有值"button"，"hidden"，"submit"，"reset"，"image"，"checkbox"或"radio"，这表示元素的HTML值属性。请参阅HTML 4.01中的value属性定义。

或DOM中的class HTML属性className：

元素的class属性。由于与许多语言公开的"class"关键字冲突，此属性已重命名。请参阅HTML 4.01中的class属性定义。

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

Answer 3

某些浏览器确实支持您尝试执行的操作，但我不确切地知道自定义属性使用<input data-id2="boop" />并使用var tag = document.getElementById("beep"); var id2 = tag.dataset.id2访问它：

{{1}}

参见Element Dataset

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

3 个答案: