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

Why can't I refer to all attributes the same way?

本文关键字：引用 方式 属性 不能 为什么      更新时间：2023-09-26

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

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

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

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

input元素的 value 属性示例：

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

或者在DOM中className的class HTML属性：

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

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

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

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

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

有关元素数据集，请参见

相关文章：