javascript - How do I get all the properties and methods of a DOM element - Stack Overflow

admin管理员组

文章数量:1391987

I can get all the properties and methods of a DOM element in the following way

var e = document.createElement('div')
let arr = []
for(let key in e){
  arr.push(key)
  console.log(key)
  //cloneNode
  //...
}

But I want to know why the following methods are not available?

const arr = Object.key(e)
//result: []

const arr2 = Object.getOwnPropertyNames(e)
//result: []

why?

Assuming that：

How do I get all the properties and methods of a DOM element and store them in an array

I can get all the properties and methods of a DOM element in the following way

var e = document.createElement('div')
let arr = []
for(let key in e){
  arr.push(key)
  console.log(key)
  //cloneNode
  //...
}

But I want to know why the following methods are not available?

const arr = Object.key(e)
//result: []

const arr2 = Object.getOwnPropertyNames(e)
//result: []

why?

Assuming that：

How do I get all the properties and methods of a DOM element and store them in an array

• javascript
• dom

Share Improve this question Follow edited Apr 16, 2021 at 6:15 BaiClassmate Xiao asked Apr 16, 2021 at 5:59 BaiClassmate XiaoBaiClassmate Xiao 38133 silver badges1414 bronze badges 4

• Object.keys and Object.getOwnPropertyNames basically work the same - they only give you the own keys (the former excludes non-enumerable ones, the latter includes them). In either case cloneNode and the rest are not own keys - they e from the prototype chain. – VLAZ Commented Apr 16, 2021 at 6:08
• "How do I get all the properties and methods of a DOM element and store them in an array" Like you did in the first snippet? You could also walk up the prototype chain and collect all keys into a single list but feels like more work than the loop. – VLAZ Commented Apr 16, 2021 at 6:09
• @VLAZ wow,I see. Can you answer this question? I want more people to see it – BaiClassmate Xiao Commented Apr 16, 2021 at 6:17
• @BaiClassmateXiao VLAZ's answer was precisely right. I built on that same principle in my solution, which shows the logic to set up a recursive function to retrieve all available properties and methods from the prototype chain, and to either store those key name in an array, or to store the key names and their values associated with the originally passed-in element in an object. – Brandon McConnell Commented Apr 16, 2021 at 7:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

As VLAZ mentioned, many of those properties you want to retrieve e from the prototype chain. In order to store all of them in an array, we will actually need to loop through the prototype chain using recursion.

Using recursion will allow us to create a simple function we can use to quickly retrieve all available properties and methods for any node or object without having to set up a for..in loop each time. Here is how I would achieve this:

var e = document.createElement('div');

const getAllProperties = (e, props = []) => e.__proto__ ? getAllProperties(e.__proto__, props.concat(Object.getOwnPropertyNames(e))) : [...new Set(props.concat(Object.getOwnPropertyNames(e)))];

const divProps = getAllProperties(e);

console.log(`ALL ${e.constructor.name} properties (${divProps.length})`, divProps);

You could even take this one step further and return each property and method available along with the values associated with keys by mapping them back to the original node/object in a new key-value object:

const e = document.createElement('div');

const getAllProperties = (o, e = o, props = []) => e.__proto__ ? getAllProperties(o, e.__proto__, props.concat(Object.getOwnPropertyNames(e))) : Object.fromEntries([...new Set(props.concat(Object.getOwnPropertyNames(e)))].map(prop => [prop, o[prop]]));

const divProps = getAllProperties(e);

console.log(`ALL ${e.constructor.name} properties (${Object.keys(divProps).length})`, divProps);

It is because these built-in properties of a DOM object are enumerable but are not own properties. In fact these properties are inherited properties. If a property is enumerable but not own-property propertyIsEnumerable method will give false.

Observe the example below:

let inp = document.getElementsByClassName('someclass')[0]
console.log(inp.propertyIsEnumerable('onclick'))

<input type='range' class='someclass' min='0' max='100' />

As the output of the above code snippet gives out false, that means the property onclick is enumerable but not an own property. Any enumerable properties appear in for...in loop. But only enumerable and own properties appear in Object.keys method. That is why you get the value in for...in loop but not with Object.keys

I am assuming you only need the keys and not their values.

First, confirm if the var e as you defined below is indeed an object.

var e = document.createElement('div')

Second, the correct method that returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would is below

Object.keys(e) 

MDN link for reference

If you refer to the MDN docs you will find the below example

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

本文标签： javascriptHow do I get all the properties and methods of a DOM elementStack Overflow