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

Question

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

<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 = '';

但现在我得到的是一个空字符串。有没有一种简单的方法可以访问HTMLElement上的自定义属性，而不必逐个遍历HTMLElement.attributes？请记住，我正在使用原生JS和一些旧浏览器。

- Nicolas Bouvrette

---

使用.placeholder来设置/获取占位符 alert(gender.placeholder);。 - www139

一个选择语句没有占位符...那么它们试图解决什么问题？ - epascarello

@epascarello，确切地说，我正在尝试向选择元素添加占位符属性。 - Nicolas Bouvrette

@www139 这在一些浏览器（例如Chrome）中不起作用。 - Nicolas Bouvrette

谢谢 :) 我不知道那个 (+1 on your question) - www139

你可以在 HTMLSelectElement.prototype 上定义 placeholder 作为 getter/setter，内部调用 setAttribute/getAttribute，以便属性和属性映射彼此，就像 title 一样。 - dandavis

Answer 1

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

- scrappedcola

---

那很容易，我以为getAttribute不支持旧版浏览器，但实际上是支持的。 - Nicolas Bouvrette

Answer 2

不是

HTMLSelectElement.prototype.placeholder = '';

实际上将其设置为空字符串？

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

- Steve Harris

---

是的，我知道原型不是一个好主意，但我正在使用占位符进行其他一些操作，这些操作在此问题中解释起来太长了。 - Nicolas Bouvrette