인프런 커뮤니티 질문&답변
작성한 질문수
DOM API-2 1분54초 경 질문드립니다.
해결된 질문
작성
·
37
1
안녕하세요 강의 잘 듣고 있습니다 좋은 강의 만들어주셔서 감사합니다!
DOM API-2 1분54초 경 질문드립니다.
let $type = document.createElement("div");
$type.className = "info-item";
$type.id = "type";
$type.textContent = "말티즈";
console.log($type);
이렇게 출력이 되고
div#type.info-item
let $type = document.createElement("div");
$type.className = "info-item";
$type.id = "type";
$type.textContent = "말티즈";
console.log($type.outerHTML);
다음과같이 .outerHTML을 출력해야 강의와 같이 아래처럼 출력이 되는데
<div class="info-item" id="type">말티즈</div>
어떤 차이가 있는 걸까요? 환경설정을 어떻게 하면 강의처럼 그냥
console.log($type);만 출력해도
<div class="info-item" id="type">말티즈</div>
와 같이 웹사이트 콘솔창에서 볼 수 있을까요?
⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.
⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
답변 2
0
안녕하세요 🙂 질문 감사드립니다!!
해당 부분은 브라우저 차이, 혹은 브라우저의 버전 차이일 수 있습니다.
저는 크롬 브라우저를 사용하고 있는데요, console.log($type)의 결과가 전체 HTML로 출력이 되고있습니다.
크롬의 다른 버전, 사파리, 엣지 등으로 해당 코드를 실행하면, div.#type.info-item과 같이 DOM 객체로 출력이 된다고 합니다.
한 번 확인해보시고 해결이 되지 않으시면 다시 질문 남겨주세요!! 감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다. 한승일님.
DOM 요소를 콘솔에 출력하는 방식에서 차이가 날 수 있는 이유에 대해 설명드리겠습니다. 기본적으로 console.log($type);를 사용하면 브라우저 콘솔에서 DOM 요소 객체를 시각적으로 표현하거나, 객체 형태로 나타내는 방식이 브라우저의 버전에 따라 다를 수 있습니다. console.log($type.outerHTML);을 사용하면, 해당 요소의 정확한 HTML 마크업 문자열이 출력되므로 일관된 결과를 제공합니다.
브라우저 설정에 따라 DOM 객체가 보여지는 방식은 달라질 수 있으므로, 명확한 HTML을 보기 위해서는 .outerHTML을 사용하는 것이 안전합니다. 어떤 설정으로 인해 강의와 동일하게 출력되는지에 대한 명확한 설정은 없으나, 일반적으로 최신 브라우저를 사용하고 있다면 DOM 객체를 인간이 읽기 쉽게 콘솔에 표시하려고 노력합니다.
또 다른 해결 방법으로는 개발자 도구의 콘솔 탭에서 DOM 객체를 마우스 오른쪽 버튼으로 클릭하여 ‘모든 속성 표시’와 같은 옵션을 실행해 볼 수 있습니다.
관련 논의는 아래 링크에서 확인할 수 있습니다:
이 링크에서는 선택자에 따른 요소 출력 방식의 다양성과 그 이유에 대해 설명하고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.