Javascript 让JSAPI返回一个多填充的DOM节点

我在HTML中使用

元素，它有不错的支持，但不足以满足我的目的。

HTMLDataElement

中唯一的额外功能是

value

的getter，它返回相应的属性

当然，这很容易实现，只需使用以下代码（当然，在特性检测之后）

这很有效。只有一个问题：当使用诸如

getElementById

、

querySelector

等本机API时，返回的节点不是实例

HTMLDataElement

。如果这是可能的话，我怎么能做到呢

为了清楚起见，我希望能够执行

document.querySelector（'foo'）.value

，无论是否支持

的浏览器，其操作都是相同的

---

（我很清楚我可以用

.getAttribute（'value'）

而不是

.value

。关键是我不想这么做。）

在Twitter上联系Jonathan Neal*后，他提供了一个很好的例子，说明了如何做到这一点

if（！this.HTMLDataElement）{
this.HTMLDataElement=this.htmlunknowneelement；
const valueDescriptor=Object.getOwnPropertyDescriptor（HTMLDataElement.prototype，“value”）；
Object.defineProperty(
HTMLDataElement.prototype，
“价值”，
值描述符| |{
得到（）{
返回'DATA'==this.nodeName&&this.getAttribute（'value'）；
}
}
);
}
console.log（'data:'，document.querySelector（'data'）.value）；
console.log（'xdata:'，document.querySelector（'xdata'）.value）

您必须使用
document.registerement（'x-foo'），但需要中间的破折号，因此。。。我真的不知道怎么做polyfill。如果你有办法，告诉我们。@Akxe这是我的问题。我几乎可以肯定这是可能的，因为我以前也处理过类似的情况。但是它是一个自定义元素-它是标准化的。@Akxe-如果您有
文档。registerement
根据两个“功能”的兼容性表，您也可能有
：p
class HTMLDataElement extends HTMLElement {
    constructor() {
        super();
    }

    get value() {
        return this.getAttribute(`value`);
    }
}