我如何使用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"));