javascript 공부 : 부모노드, 자식노드, 형제노드 찾기

부모노드

parentNode 부모태그 찾아줍니다.

자식노드

childNodes 자식노드를 모두 찾아줍니다.
firstChild 첫 번째 자식노드
lastChild 마지막 자식노드

형제노드

previousSibling 이전 형제노드
nextSibling 다음 형제노드

자바스크립트에서 #text가 숨어있다.

자바스크립트에서 #text 들어가 있습니다.

코드 사용 예시

<!-- #text 숨어있습니다. -->
<div class="header">
  <!-- #text 숨어있습니다. -->
  <div class="header_contents">
    <!-- #text 숨어있습니다. -->
    <a href="#">
      <!-- #text 숨어있습니다. -->
      <span>콘텐츠 링크</span>
      <!-- #text 숨어있습니다. -->
    </a>
    <!-- #text 숨어있습니다. -->
  </div>
  <!-- #text 숨어있습니다. -->
  <h1>콘텐츠 제목</h1>
  <!-- #text 숨어있습니다. -->
</div>
<!-- #text 숨어있습니다. -->

window.onload = function () {
  let clickpopup = document.querySelector('.header');
  console.log(clickpopup); // .header
  console.log(clickpopup.childNodes);
  console.log(clickpopup.firstChild);
  console.log(clickpopup.lastChild);
  console.log(clickpopup.parentNode);
  console.log(clickpopup.previousSibling);
  console.log(clickpopup.nextSibling);
};