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

Question

when i get an element with jQuery and console.log() the element i can see all methods that i can do something with. but when i use javascript to show element in console it just show the element itself instead of show me methods like _.style _.accessKey and so on, like when i do $(this)[0] with jQuery. so how to see all these methods in pure javascript ?

Answer 1

You can try the following:-

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

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

This will print out all the properties available in a neat table format.

Answer 2

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

Answer 3

You can try following ways to find html elements:

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

and then list all methods and properties associated with that element by creating one new object and then call the function

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

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