Bir HTML öğesini JavaScript nesnesi olarak nasıl kaydedebilirim?

90

Google Chrome'u kullanmak, eğer console.logbir nesne iseniz, konsoldaki öğeyi incelemenizi sağlar. Örneğin:

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

Bu Object, yanındaki oklara tıklayarak incelenebilecek olan çıktıyı yazdırır . Bununla birlikte, bir HTMLElement kaydetmeye çalışırsam:

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

Bu <html></html>, yanındaki oklara tıklayarak incelenemeyecek olanı yazdırır . Yalnızca öğenin DOM'u yerine JavaScript nesnesini (yöntemleri ve alanlarıyla birlikte) görmek istersem, bunu nasıl yaparım?

— Ben Flynn
kaynak

165

Kullanım 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

Zaten konsolun içindeyseniz, dirbunun yerine basitçe yazabilirsiniz console.dir:

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

Farklı özellik adlarını (değerler olmadan) basitçe listelemek için şunları kullanabilirsiniz Object.keys:

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

Herkese açık bir console.keys()yöntem olmasa da , zaten konsolun içindeyseniz, şunu girebilirsiniz:

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

Yine de bu, konsol penceresinin dışında çalışmaz.

— Mathias Bynens
kaynak

Console.dir () direk konsolda kullandığımda çalışıyor. Ancak bunu VS Code'daki gerçek .js dosyamda yazarsam, chrome dev konsolu yalnızca yazıldığı dosyanın adını ve satır numarasını kaydeder. Neden olduğunu biliyor musun?

— Maiya

27

bunu dene:

console.dir(element)

Referans
[Video] Paul Irish, konsolun uzman kullanıcısı olma hakkında.

— Ross
kaynak

+1 Her zaman [[element]]bir dizi oluşturmak için kullanıyordum , böylece Chrome onu bir nesne olarak görüntülemek zorunda kaldı ... Teşekkürler!

— pimvdb

Harika, basit cevap. 'En eski' türle diğerinden sonra saç geldi, bu yüzden kabul et, ama çok teşekkürler!

— Ben Flynn

Sorun yok. Hangisinin kabul edildiği umurumda değil, ancak kabul edilen cevap daha sonra başkalarına en çok yardımcı olan cevap olmalıdır.

— Ross

2

Tarayıcı sadece html kısmını yazdırır, kubbe yapısını görmek için elemanı bir nesneye koyabilirsiniz.

console.log({element})

— Navid Shad
kaynak