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