📝
서은 STUDY_SCRIPT
  • JAVASCRIPT 기록
  • JAVASCRIPT 문법정리
    • 데이터 저장하기
    • 데이터 불러오기
    • 데이터 실행하기
    • 데이터 제어하기
    • 면접질문 정리
  • PHP를 이용한 사이트 작업
    • PHP와 MySQL
      • 댓글쓰기
      • 회원가입
      • 로그인
      • 게시판
        • 페이지네이션 & 게시글보기
        • 수정/삭제/목록/검색
  • 생활코딩 JavaScript
    • JavaScript 입문수업
      • Basic
        • 자바스크립트 기본 세팅
        • 데이터타입
        • 변수
        • 연산자
        • 조건문
        • 반복문
        • 함수
        • 배열
        • 객체
        • 모듈
        • 정규표현식
      • 함수지향
        • 유효범위
        • 값으로서 함수
        • 값으로서 콜백
        • 클로저
        • arguments
        • 함수의 호출
      • 객체지향
        • 생성자와 new
        • 전역객체
        • this
        • 상속
        • Prototype
        • 표준내장객체의 확장
        • Object
        • 데이터 타입
        • 복제 & 참조
    • JavaScript Basic
      • 자바스크립트란?
      • 데이터타입
      • 변수와 대입연산자
      • 제어할 태그 선택
      • 비교연산자와 불리언
      • 조건문 if
      • 리팩토링
      • 배열 [ ]
      • 반복문 while
      • 배열과 반복문
        • 배열과 반복문의 활용
      • 함수
        • 함수의 활용
      • 객체 { }
        • 객체와 반복문 for~in
        • 프로퍼티와 메소드
        • 객체의 활용
      • 파일로 쪼개서 정리정돈
      • 라이브러리 & 프레임워크
      • UI & API
    • Web Browser
      • JavaScript란?
      • BOM
        • 전역객체 window
        • 사용자와 커뮤니케이션
        • Location 객체
        • Navigator 객체
        • 창 제어
      • DOM
        • 제어 대상 찾기
        • jQuery
        • HTMLElement
        • Element 객체
          • 식별자 API
          • 조회 API
          • 속성 API
        • Node 객체
          • Node 관계 API
          • Node 종류 API
          • Node 변경 API
          • jQuery 노드 변경 API
          • 문자열로 노드 제어
        • HTMLCollection
      • 이벤트
        • 이벤트 등록
        • 이벤트 전파(버블링과 캡처링)
        • 이벤트 기본 동작 취소
        • 이벤트 타입
      • 네트워크 통신
        • Ajax
        • JSON
  • NOMAD JAVASCRIPT
    • VanillaJS
      • Why JS?
      • ES5, ES6
      • Basic
        • Alert & Console
        • Variable
        • Data Types
        • Array & Object
      • Function
      • DOM
        • Event & Event handler
        • Conditional
        • Function Practice
      • Momentum App
        • Making a JS Clock
        • Saving the User Name
        • To-Do List
        • Image Background
        • Getting Weather
  • DREAM CODING
    • 자바스크립트 기초 강의 (ES5+)
      • JavaScript 역사
      • async & defer / Strict Mode
      • Variable / Hoisting / Data Type
      • Operator / if / Loop
      • Function
        • 함수의 선언
        • 함수의 표현
      • Class
      • Object
      • Array
      • Array API
      • JSON
      • Callback
      • Promise
      • Async & Await
  • WEB BOS
    • #JavaScript30
Powered by GitBook
On this page

Was this helpful?

  1. 생활코딩 JavaScript
  2. Web Browser
  3. DOM
  4. Node 객체

Node 관계 API

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다.

Node 관계 API

  • Node.childNodes : 자식노드들을 유사배열에 담아서 리턴한다.

  • Node.firstChild : 첫번째 자식노드

  • Node.lastChild : 마지막 자식노드

  • Node.nextSibling : 다음 형제 노드

  • Node.previousSibling : 이전 형제 노드

<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>
let s = document.getElementById('start');
console.log(1, s.firstChild); // #text

let 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>
PreviousNode 객체NextNode 종류 API

Last updated 2 years ago

Was this helpful?