웹브라우저 Javascript

Node 관계 API

토픽 웹브라우저 Javascript

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.

  • Node.childNodes
    자식노드들을 유사배열에 담아서 리턴한다.
  • Node.firstChild
    첫번째 자식노드
  • Node.lastChild
    마지막 자식노드
  • Node.nextSibling
    다음 형제 노드
  • Node.previousSibling
    이전 형제 노드

아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다.

<body id="start">
<ul>
    <li><a href="./532">html</a></li> 
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
<script>
var s = document.getElementById('start');
console.log(1, s.firstChild); // #text
var ul = s.firstChild.nextSibling
console.log(2, ul); // ul
console.log(3, ul.nextSibling); // #text
console.log(4, ul.nextSibling.nextSibling); // script
console.log(5, ul.childNodes); //text, li, text, li, text, li, text
console.log(6, ul.childNodes[1]); // li(html)
console.log(7, ul.parentNode); // body
</script>
</body>

 

댓글

댓글 본문
  1. 코리니
    20230103
  2. 헤밍웨이
    220825 감사합니다!
  3. 임앤강
    2022-02-12 강의 감사합니다~
  4. 드림보이
    2021.12.23. Node 관계 API 파트 수강완료
  5. pmxsg
    2021.12.22. 수강
  6. labis98
    20210911 좋은 강의 감사합니다.
  7. 박병진
    죄송합니다. 꾸벅 졸았습니다. 요즘따라 너무 힘듭니다. 그래도 포기하지않고 배움을 계속하겠습니다. 2020.12.07완료
  8. 현미쓰
    명강의...★
  9. 이준호
    완료
  10. anne
    완료
  11. 정승옥
    완료
  12. 한강
    node 객체 관계 api 잘 배웠습니다~~^^!
    200702
  13. 김진욱
    완료
  14. ㅎㅅㅁ
    200208
  15. 굼벵이
    완료
  16. 모든일이일사천리
    Done: 19/11/24 3PM
  17. 정홍
    완료
  18. 2019-10-14 10:14pm 완료
  19. JuicyFresh
    이고잉님, 강의 감사합니다.
    다니엘님 댓글 감사합니다.

    firstElementChild,
    lastElementChild,
    nextElementSibling,
    previousElementSibling
  20. 김수
    20180901 감사해요
  21. 생선과고양이
    20180426 감사합니다
  22. An TaeHyeon
    18-01-28 수강완료!
    강의록 공유합니다.
    https://goo.gl/vtXMzY
  23. 박인호
    12-29
    수강완료.
  24. Byungsoo Kim
    감사합니다.
  25. 수복
    감사합니다.
  26. Sangmook Kim
    170807 완료
  27. illliilllliillliii
    감사합니다
  28. crable
    감사합니다
  29. 전성욱
    childNodes => 자식객체들을 유사배열로 반환
    firstChild, lastChild => 특정 위치의 자식배열 반환
    nextSibiling => 다음 위치의 노드 반환
    previousSibiling => 이전 위치의 노드반환
    parentNode => 부모객체 반환
  30. 꾸리꾸리
    마지막 부분에 에러 부분
    설명하실때 보시고 말씀하시는 것 같은데요
    대화보기
    • codeX
      감사합니다.
    • 폭스킴
      공백도 TEXT이기 때문에 노드로 보는 거군요~ 나중에 좀 헷갈릴 수 있겠네요~
    • ECMAScript
      와 text Node를 거르고 조회하는 방법이 없을까하고 구글링을 하다가 무심코 댓글을 봤는데
      정확히 원하는 답을 이렇게 적어주셨네요 ^^
      정말 감사합니다. ㅎ
      대화보기
      • 유유
        감사합니다!
      • hyuna
        감사합니다
      • tachyon
        감사합니다
      • 이웃집토토로
        빵터질 부분이 어느 부분인지 ... 이해하지 못하겠지만...
        ul태그 색 바꾸는건 li태그들에 a 링크 걸려있어서 색이 안바뀌는 것처럼 보일 뿐이고요.
        블릿을 보면 색이 바뀌어 있습니다.
        대화보기
        • 허당고잉
          ㅋㅋㅋㅋㅋㅋㅋㅋ이번 강의 마지막에 빵터졌네요ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
          엘리먼트들 다 빨간색으로 바뀔 줄 알았는데ㅋㅋㅋㅋㅋ 반전ㅋㅋㅋㅋㅋㅋㅋㅋ
          실수인가요, 노리신 건가요ㅋㅋㅋㅋ
        • yihsang
          댓글에서도 많이 배웁니다.
          저도 꼭 도움이 되는 사람이 되겠습니다.
        • JustStudy
          2016.07.08 금
          고맙습니다 3.
        • JustStudy
          2016.07.30금
          고맙습니다 2.
        • 이주환
          2016. 04. 27
          잘보고 갑니다~!
        • JustStudy
          고맙습니;다
        • SK Kim
          저도 배우는 중이라...죄송합니다.
          대화보기
          • 박찬울
            ⓐ start.childNodes[1].style

            과 같이 콘솔에 적었을 때 그 값이 true 가 아니고

            ⓑ CSSStyleLeDeclaration{~...}

            과 같은 결과를 내놓더라고요.

            if문의 조건 안에 왜 boolean 이 아닌 값(ⓐ)이 들어가는데도 true 로 인식을 하는데,
            생활코딩의 "언어 - 자바스크립트 - 조건문" 에서 이미 배운 내용이었었네요 ^^;;

            https://www.opentutorials.org......724
            "기타 false 로 인식되는 데이터형으로는 0, NaN, null, undefined 등이 있음."

            하나 더 궁금한게 있어서 질문을 드려보는데요, 우리가 물론

            ⓒ if(start.childNodes[1].style){console.log('true');}else{console.log('false');}

            와 같이 조건이 true 로 인식되는지 false로 인식되는지 판별할 수도 있겠지만 혹시 데이터를 넣었을 때 true 또는 false 를 반환하는 함수가 있나요? 대략 다음 형식으로요

            ⓓ TorF(style.childNodes[i].style)
            대화보기
            • basicb
              동영상 마무리가 애매하게 끝나서 뭔가 했더니 egoing님 의도는 text가 있어서 안된다를 보여주시고자 한듯 하네요.
            • SK Kim
              맨 끝 부분을 다음과 같이 수정하면 됩니다.
              for(var i = 0; i<start.childNodes.length;i++){
              if(start.childNodes[i].style) //스타일이 가능한지 확인.
              start.childNodes[i].style.color = 'red';
              };
              그런데 script 태그에도 스타일 속성이 적용되네요.
            • WayneKing
              전진!
            • 2015-11-12 수능날에...
              동영상처럼 자유자재로 하려면....
              손가락 지문 없어질때까지 타이핑해야 가능하겠죠? ㅡㅡ....
            • 코딩!
              공백도 text!
              역시 컴퓨터네요 ㅎㅎ