列出 DOM 对象上的变量和方法答案

【问题标题】：List Variables and Methods on DOM Object列出 DOM 对象上的变量和方法
【发布时间】：2016-05-03 08:15:59
【问题描述】：

如何找出 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>

【问题讨论】：

标签： javascript html dom web-component

【解决方案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>

【讨论】：