0
//------------
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?

  • What do you mean by "does not work?" – Robert Harvey May 17 '18 at 0:17
  • console.dir(e) successfully displays the list of the properties of the DOM Element, however Object.getOwnPropertyNames which is supposed to return an array of all properties returns empty array when I console.log(Object.getOwnPropertyNames(e)); – Mohammad Daud Ibrahim May 17 '18 at 0:31
  • If I understand this article correctly, that's because Object doesn't have any intrinsic property names of its own. Person does; you described them at the top of your post. – Robert Harvey May 17 '18 at 4:21
  • Sorry couldn't get my head around it. The article says "All objects in JavaScript are descended from Object; all objects inherit methods and properties from Object.prototype, although they may be overridden." Can you please elaborate and explain further. – Mohammad Daud Ibrahim May 17 '18 at 11:12
0

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"];
  • 1
    Thank you! Your answer was a real eye opener. Now I understand that elements inside the DOM do not have methods or properties of their own instead they inherit from multiple objects Example(HTMLDivElement, HTMLElement and many more) I realized this when I tested getOwnPropertyNames(Element.__proto__) then I started getting the properties and methods that were shown in the log by console.dir(Element) by chaining proto multiple times. And lastly I understood the actual use of console.log and console.dir. Thanks a bunch – Mohammad Daud Ibrahim May 19 '18 at 1:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.