列出 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));

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

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

List Variables and Methods on DOM Object

html

javascript

dom

web-component