javascript - 列出 DOM 对象上的变量和方法

Question

如何找出 DOM 对象上有哪些变量和方法？在下面的示例中，如何找到 div#main 有一个变量 greeting 和一个方法 greet？

(最好不使用外部库。)

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

main.greeting = 'Hello Meep!';

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

main.greet();

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

Answer 1

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

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

这适用于各种现代浏览器，但请注意，浏览器并不要求允许您以这种方式内省(introspection) 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>