<body>
<h1 id="title">title</h1>
<div class="text">text-1</div>
<div class="text">text-2</div>
<script>
// id 속성값이 title인 요소 노드 선택하기
document.addEventListener("DOMContentLoaded", () => {
const el = document.getElementById("title");
console.log(el);
// class 속성값이 text인 요소 노드 모두 선택하기
const classEl = document.getElementsByClassName("text");
console.dir(classEl);
console.log(classEl[0]);
console.dir(classEl[1]);
for (let el of classEl) {
console.log(el);
}
// p 태그에 해당하는 요소 노드 모두 선택하기
const tagEls = document.getElementsByTagName("div");
console.log(tagEls);
console.log(tagEls[0]);
console.dir(tagEls[1]);
for (let el of tagEls) {
console.log(el);
}
},0);
</script>
</body>
document 메서드로 class 속성값, id 속성값, HTML 태그명을 전달받아 노드를 선택하고 console.log()로 출력하는 코드
원랜 다 log 였는데 실험하느라 dir을 섞었다.
문제는 다음과 같았다.
console.log()는 HTML태그 형태로 출력되어야 하는데 (<p class="text>text-1</p>) 이런 식으로
console.dir()로 출력한 것 처럼 자바스크립트 객체의 요소의 속성과 메서드를 목록으로 표시되는 현상이었다.
이 현상은 위에서부터 연속으로 이어져 두 표현이 혼재되기도 했는데 한참을 헤매서야 원인을 찾았다.
버그같은 건 아니고 크롬 개발자도구 콘솔창을 열고 새로고침할 경우 간혹 발생하는데, 콘솔이 성격이 급한건지 DOM 요소가 로드되기 전에 console.log를 출력하려고 해서 dir로 출력한 것 처럼 표시된 거였다.
dir로 나오는 정보 중 outerHTML 한줄을 출력해야 되는데 뭔가 어긋나서 그냥 통째로 출력해버리는 듯?
어차피 콘솔 탭을 닫았다 키면 정상적으로 출력돼서 문제 없다.
즉 console.뭐시기는 콘솔창을 열 때 실행되는 건데, 콘솔창을 열어둔 상태로 로딩을 해서 가끔 원하는대로 출력이 안되는 듯??
이유가 궁금해서 진짜 오랫동안 찾았는데, 정말 제대로 이해하려면 크롬 개발자 도구 작동방식부터 알아야해서 사족이 너무 길어지는 느낌이었다.
참고로 DOMContentLoaded 써도 개무시하고 걍 출력해버린다 ㅋㅋㅋ
브라우저가 html문서를 읽는거랑 개발자도구 콘솔이 읽는거랑 별개로 돌아가는 듯?????
그래서 콘솔이 더 빨랐으면 의도치 않은 출력이 되는거고
위에서부터 연속적으로 문제가 생기는 건, 콘솔이 후다닥 console.log를 dir처럼 출력하다가 브라우저가 작업을 마쳐서
그때부턴 정상적으로 HTML태그로 출력해주는 것 같다.
수많은 검색과 시도를 해봤고 아직 시도해보지 않은 방법도 있지만, console.log가 출력할 값을 outerHTML로 제한한다거나, 정점컬렉션을 쓴다거나..
나중에 실제로 문제가 될 정도면 써보던가 해야겠다.
뭔가 잘못 나올 경우같은데 오히려 많은 정보를 담고 있어서 이상했는데 그래도 풀려서 다행~
'Javascript' 카테고리의 다른 글
| 자바스크립트 백틱 안에 달러 $ 넣기 (0) | 2024.10.15 |
|---|