Google 크롬을 사용 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>옆에있는 화살표를 클릭하여 검사 할 수없는 것을 인쇄 합니다. 요소의 DOM 대신 JavaScript 객체 (메서드 및 필드 포함)를보고 싶다면 어떻게해야합니까?
답변:
사용 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
하지만 콘솔 창 밖에서는 작동하지 않습니다.
[[element]]배열을 만드는 데 사용 했기 때문에 Chrome이 객체로 표시하도록했습니다. 감사합니다!
브라우저는 html 부분 만 인쇄하고, 요소를 개체에 넣어 돔 구조를 볼 수 있습니다.
console.log({element})