Question

I am needing to distinguish between a “pure” JavaScript property on an object and one that is a native property like innerHTML or style.

In Safari I can use Object.getOwnPropertyDescriptor() and check the configurable property (which is false for special properties), however this unfortunately doesn’t have the same results on Chrome or Firefox (which return that the properties are configurable).

Try this fiddle on different browsers to see the problem.

Is there a reliable way to determine if the property is a special internal property or not?

Update

I’ve noticed that Firefox actually returns undefined if you try to get the property descriptor of a native property, so that might work fine. That leaves Chrome, which unfortunately returns a property descriptor that looks exactly like a normal property.

For example, here’s the descriptor for innerHTML in Chrome:

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

…and here for an empty string property called “test”:

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

Exactly the same. 🙁

Answer 1

You have to check if the property is defined on a newly created instance of the DOM element in question:

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

A function that tests this might look like:

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') );​