我如何使用javascript控制台DOM對象列表

Question

當我使用jQuery和console.log（）獲得元素時，我可以看到我可以使用的所有方法。 但是，當我使用javascript在控制台中顯示元素時，它只是顯示元素本身，而不是向我顯示_.style _.accessKey等方法，例如當我使用jQuery執行$（this）[0]時。 那么如何在純JavaScript中查看所有這些方法？

Answer 1

您可以嘗試以下操作：

var div = document.getElementsByTagName('div')[0];

console.table(div) or console.dir(div)

這將以整齊的表格格式打印出所有可用的屬性。

Answer 2

使用console.dir（）查看javascript DOM對象的所有方法。

Answer 3

您可以嘗試以下方法來查找html元素：

var x = document.getElementById('id');
console.log(x);

var y = document.getElementsByTagName('tag_name');
console.log(y);

var z = document.getElementsByClassName('class_name');
console.log(z);

然后通過創建一個新對象列出與該元素關聯的所有方法和屬性，然后調用該函數

function getAllMethods(object) {
       return Object.getOwnPropertyNames(object).filter(function(property) {
        return typeof object[property] == 'function';
}

console.log(getAllMethods("object"));