ฉันจะบันทึกองค์ประกอบ HTML เป็นวัตถุ JavaScript ได้อย่างไร

Question 1

ใช้ 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 ขององค์ประกอบฉันจะทำอย่างไร

Question 2

ใช้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

สิ่งนี้จะใช้ไม่ได้นอกหน้าต่างคอนโซล

Question 3

ลองสิ่งนี้:

console.dir(element)

ข้อมูลอ้างอิง
[วิดีโอ] Paul Irish เกี่ยวกับการเป็นผู้ใช้ระดับสูงของคอนโซล

Question 4

เบราว์เซอร์พิมพ์เฉพาะส่วน html คุณสามารถใส่องค์ประกอบในวัตถุเพื่อดูโครงสร้างโดม

console.log({element})