如何在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")