如何在Javascript中有效定义自定义HTMLElement属性，以便能够使用HTML进行设置？

Question

作为一个例子（ 请关注问题 ，而不是示例 - 我有充分的理由），我正在尝试在Javascript中的HTMLSelectElement对象上添加一个新的“占位符”属性。 所以我这样做：

<select id="gender" name="gender" placeholder="Male">
    <option></option>
    <option>Male</option>
    <option>Female</option>
    <option>Other</option>
</select>

现在如果我运行这个，我会'未定义'：

var gender = document.getElementById('gender');
alert(gender['placeholder']);

所以尝试了这种方法，看看这是否会有所帮助：

HTMLSelectElement.prototype.placeholder = '';

但现在我得到一个空字符串。 是否有一种简单的方法来访问HTMLElements上的自定义属性，而无需逐个遍历HTMLElement.attributes？ 请记住，我正在使用Vanilla JS和一些旧浏览器。

Answer 1

只需使用getAttribute来获取占位符值： document.getElementById("gender").getAttribute("placeholder")

Answer 2

不

HTMLSelectElement.prototype.placeholder = '';

实际上把它设置为空字符串？

在您的示例中，您需要将Male选项设置为Selected，而不是使用适用于文本输入的占位符。