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?

Improve this question
4
  • What do you mean by "does not work?"
    – Robert Harvey
    May 17, 2018 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, 2018 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, 2018 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, 2018 at 11:12

1 Answer 1

Reset to default
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"];
Improve this answer
1
  • 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, 2018 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.