0

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

<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*
4

3 回答 3

4

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

于 2013-01-29T18:29:11.567 回答
4

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

创建 DOM 元素时，只有官方的 HTML 属性（甚至可能不是全部）映射到 DOM 属性。在这个过程中也可能会被修改。DOM 节点上可用的属性在DOM和HTML DOM 规范中定义。

元素value属性示例：input

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

或者DOM 中的classHTML 属性：className

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

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

于 2013-01-29T18:33:31.843 回答
1

某些浏览器确实支持您尝试执行的操作，但我不知道具体是哪个，对于自定义属性<input data-id2="boop" />，可以像这样使用和访问它：

var tag = document.getElementById("beep");
var id2 = tag.dataset.id2

参见元素数据集

于 2013-01-29T18:30:48.050 回答