웹브라우저 JavaScript

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. 감사합니다
  3. tachyon
    감사합니다
  4. 이웃집토토로
    빵터질 부분이 어느 부분인지 ... 이해하지 못하겠지만...
    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
            감사감사합니다 열시미할게여!
          • ㅇㅇㅇ
            댓글 잘 안남기는데.. 이렇게 지식 나눠주셔서 감사합니다~ 이쪽분야 처음으로 혼자 공부하는데 용기가생김
          • 도로시
            이고잉님께도 배우고 댓글로도 또 배우네요. 감사합니다 ^^
          • 비졀리
            잘보고 있습니다. 감사합니다^^
          • somdari
            Daniel 님의 말씀에 공감합니다.. 생활코딩 오픈 플랫폼을 직접 만들면서까지 체계적인 지식 공유를 위해 시간과 정성을 들이는 것은 아무나 할 수 있는 일이 아니지요.. 그런점에서 이고잉님은 복 받으셔야 합니다..^^;
          • Daniel
            마구 흩어져있는 지식들을 순서대로 바로 잡아 주셔서 너무 고맙습니다 ^^ 자주 보며 정리할께요.
            지식을 공유하는 사람은 정말 위대하다고 생각해요. 거지에게 돈 몇 푼 쥐어주는게 아닌 고기잡는 법을
            가르쳐 준다는게 결코 쉬운 일이 아니거든요. 반드시 복 받을 거예요 ^^
          • Daniel
            이고잉님은 아시는 거겠지만, 다른 초보분들을 위해 첨언하자면,
            저 사이의 빈 text노드가 거슬리는데, 안 나오게하는 API도 있어요.
            firstElementChild,
            lastElementChild,
            nextElementSibling,
            previousElementSibling.. 등으로서 ecma5에 추가된 api입니다. 저걸 쓰면 공백 text노드는
            걸러집니다. 브라우저마다 공백 text노드의 유무가 틀린데서 오는 혼란때문에 생긴 api예요.
            저거 말고 두어개 더있는데, 까먹음 ㅋㅋ ㅜㅜ
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기