如何获取 DOM 元素的所有属性和方法

Question

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

Answer 1

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

Answer 2

As VLAZ mentioned, many of those properties you want to retrieve come 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);

Answer 3

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"]