列出DOM对象的变量和方法

Question

我如何找出DOM对象上的变量和方法？在下面的示例中，如何找出div#main包含变量greeting和方法greet？

（最好不使用外部库。）

＆＃13;

＆＃13;

var main = document.querySelector('#main');

main.greeting = 'Hello Meep!';

main.greet = function() {
  alert(this.greeting);
}

main.greet();

＆＃13;

<div id="main">
  ...
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在允许使用DOM元素的浏览器上，您可以使用Object.keys或for-in来获取可枚举属性的数组：

console.log(Object.keys(main));

适用于各种现代浏览器，但请注意，浏览器不是必需，以允许您以这种方式内省DOM元素，因此如果您依赖它，请务必在目标浏览器。

如果您想要不可枚举的属性以及可枚举的属性，可以尝试Object.getOwnPropertyNames(main)而不是Object.keys(main)。

示例：

var main = document.querySelector('#main');

main.greeting = 'Hello Meep!';

main.greet = function() {
  alert(this.greeting);
}

main.greet();

var p = document.createElement('p');
p.appendChild(document.createTextNode(
  Object.keys(main).join(", ")
));
document.body.appendChild(p);

<div id="main">
  ...
</div>