javascript - 确定属性是否是 Chrome/Firefox 中的 native DOM 属性

Question

我需要区分对象上的“纯”JavaScript 属性和 native 属性(如 innerHTML 或 style)。

在 Safari 中，我可以使用 Object.getOwnPropertyDescriptor() 并检查 configurable 属性(对于特殊属性为 false)，但不幸的是，这没有相同的Chrome 或 Firefox 上的结果(返回属性可配置)。

尝试this fiddle在不同的浏览器上查看问题。

是否有可靠的方法来确定该属性是否是特殊的内部属性？

更新

我注意到，如果您尝试获取 native 属性的属性描述符，Firefox 实际上会返回 undefined，因此可能可以正常工作。不幸的是，Chrome 返回的属性描述符看起来与普通属性一模一样。

例如，以下是 Chrome 中 innerHTML 的描述符:

{"value":"","writable":true,"enumerable":true,"configurable":true}

...这里是一个名为“test”的空字符串属性:

{"value":"","writable":true,"enumerable":true,"configurable":true}

完全一样。 :(

Answer 1

您必须检查该属性是否在相关 DOM 元素的新创建实例上定义:

'innerHTML' in (document.createElement('div')); //yes

测试此功能的函数可能如下所示:

var test = function (elem, prop) {
    return prop in (typeof elem === 'string' ? document.createElement(elem) : elem)
}

console.log( test( 'div', 'innerHTML') );
console.log( test( document.getElementsByTagName('body')[0], 'innerHTML') );
console.log( test( document.getElementsByTagName('body')[0], 'monkey') );​