Как я могу зарегистрировать элемент HTML как объект JavaScript?

90

Используя Google Chrome, если вы console.logобъект, он позволяет вам проверить элемент в консоли. Например:

var a = { "foo" : "bar", "whiz" : "bang" };
console.log(a);

Это распечатка, Objectкоторую можно проверить, щелкнув стрелки рядом с ней. Однако, если я попытаюсь зарегистрировать HTMLElement:

var b = goog.dom.query('html')[0];
console.log(b);

Это распечатывает то, <html></html>что нельзя просмотреть, щелкнув стрелки рядом с ним. Если я хочу увидеть объект JavaScript (с его методами и полями), а не просто DOM элемента, как бы я это сделал?

javascript google-chrome google-closure-library developer-tools Бен Флинн
источник

Ответы:

164

Использование console.dir:

var element = document.documentElement; // or any other element
console.log(element); // logs the expandable <html>…</html>
console.dir(element); // logs the element’s properties and values

Если вы уже находитесь внутри консоли, вы можете просто ввести dirвместо console.dir:

dir(element); // logs the element’s properties and values

Чтобы просто перечислить различные имена свойств (без значений), вы можете использовать Object.keys:

Object.keys(element); // logs the element’s property names

Несмотря на отсутствие общедоступного console.keys()метода, если вы уже находитесь внутри консоли, вы можете просто ввести:

keys(element); // logs the element’s property names

Однако это не будет работать за пределами окна консоли.

Матиас Байненс
источник
Когда я использую console.dir () прямо в консоли, он работает. Но если я напишу его в своем фактическом файле .js в VS Code, консоль chrome dev просто регистрирует имя файла, в который он был записан, и номер строки. Знаете почему?
Maiya
27

попробуй это:

console.dir(element)

Ссылка
[Видео] Пол Айриш о том, как стал опытным пользователем консоли.

Росс
источник
+1 Я всегда использовал [[element]]для создания массива, чтобы Chrome был вынужден отображать его как объект ... Спасибо!
pimvdb 09
Отличный прямой ответ. По «самому старому» типу пришло одно за другим, поэтому и принимаю, но большое спасибо!
Бен Флинн
Без проблем. Я не возражаю против того, что принято, но принятый ответ должен быть наиболее полезным для других позже.
Росс
1

Браузер печатает только html-часть, вы можете поместить элемент в объект, чтобы увидеть структуру купола.

console.log({element})
Навид Шад
источник