생활코딩

Coding Everybody

코스 전체목록

닫기

Node 관계 API

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. 이준호
    완료
  2. anne
    완료
  3. 정승옥
    완료
  4. 한강
    node 객체 관계 api 잘 배웠습니다~~^^!
    200702
  5. 김진욱
    완료
  6. ㅎㅅㅁ
    200208
  7. 굼벵이
    완료
  8. 모든일이일사천리
    Done: 19/11/24 3PM
  9. 정홍
    완료
  10. 2019-10-14 10:14pm 완료
  11. JuicyFresh
    이고잉님, 강의 감사합니다.
    다니엘님 댓글 감사합니다.

    firstElementChild,
    lastElementChild,
    nextElementSibling,
    previousElementSibling
  12. 김수
    20180901 감사해요
  13. 생선과고양이
    20180426 감사합니다
  14. An TaeHyeon
    18-01-28 수강완료!
    강의록 공유합니다.
    https://goo.gl/vtXMzY
  15. 박인호
    12-29
    수강완료.
  16. Byungsoo Kim
    감사합니다.
  17. 수복
    감사합니다.
  18. Sangmook Kim
    170807 완료
  19. illliilllliillliii
    감사합니다
  20. crable
    감사합니다
  21. 전성욱
    childNodes => 자식객체들을 유사배열로 반환
    firstChild, lastChild => 특정 위치의 자식배열 반환
    nextSibiling => 다음 위치의 노드 반환
    previousSibiling => 이전 위치의 노드반환
    parentNode => 부모객체 반환
  22. 꾸리꾸리
    마지막 부분에 에러 부분
    설명하실때 보시고 말씀하시는 것 같은데요
    대화보기
    • 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!
              역시 컴퓨터네요 ㅎㅎ
            • 코딩!
              공백도 text!
              역시 컴퓨터네요 ㅎㅎ
            • will
              꾸르잼
            • 육점이
              감사합니다. 이번 강의 역시 정말 이해가 잘되네요!!!!
            • 메이플가이
              그냥 그대로 끝나는 것 같습니다.
              Text 가 중간에 없었다면, 모두 red 로 표시됐을것인데, 줄바꿈 공백에는 색깔일 입힐 수 없기 때문에 그냥 넘어가신 듯 합니다.
              대화보기
              • 송지
                끝에 강의가 끊긴듯한 느낌은 그걸로 끝있건가요?
                궁금합니다 답변해주세요~
              • 팽맨이러닝
                Text 노드를 건너뛰는 기능이 꼭 필요할 것 같네요.
                강의 감사합니다.
              • coolman
                감사감사합니다 열시미할게여!
              • ㅇㅇㅇ
                댓글 잘 안남기는데.. 이렇게 지식 나눠주셔서 감사합니다~ 이쪽분야 처음으로 혼자 공부하는데 용기가생김
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기