Why the methods of the Object Constructor do not work on DOM Elements

Question

//------------
let person = {
    name: 'John Doe',
    age: 22
}

let e = document.getElementById('task-title');

/* Object.getOwnPropertyNames()
Returns an array containing the names of all of the given object's own enumerable and 
non-enumerable properties. */

console.log(typeof person, person);
console.log(Object.getOwnPropertyNames(person));

console.log(typeof e);
console.log(Object.getOwnPropertyNames(e));
console.dir(e);

For my custom person object the methods Object.getOwnPropertyNames works however it does not work the Element Object Why ?

&

Are the DOM Element Objects any different than a custom object? If yes How?

Answer 1

The document.getElementById return an Element object which has a Node as its prototype. Object.getOwnPropertyNames returns an array of the own and enumerable properties of an object, that meaning that it does not include the properties inherited by that object.

For example:

function A(){
    this.propA = 'propA';
}

function B(){
    A.call(this);
    this.propB = 'propB';
}

B.prototype = Object.create(A);

var obj = new B();
var proto = Object.getPrototypeOf(obj);

console.log(Object.getOwnPropertyNames(obj)) // ["propB"];
console.log(Object.getOwnPropertyNames(proto)) // ["propA"];