JavaScript 개발자 수업 65일차 - 부모-자식-형제 태그, DOM 제어, DOM 이벤트

1. 부모-자식-형제태그

2. DOM 제어

3. DOM 이벤트

---

1. 부모-자식-형제태그

[ DOM Tree의 구성요소 ]

- 페이지의 소스의 모든 요소들이 구성요소가 된다.

- 선언문(<!DOCTYPE>), 주석, 태그, PCDATA, 속성 등...

 

[ 자식 노드 접근 프로퍼티 ]

이름	설명
hasChildNodes	현재노드 기준으로, 자식노드가 있는지 없는지 true, false로 반환한다.
childNodes	자식 노드 리스트를 확인한다. 유사 배열이며, 모든 타입의 노드를 자식으로 받는다.
firstChild	첫번째 자식 노드를 확인한다.
lastChild	마지막 자식 노드를 확인한다.

 

[ 자식 노드 접근 예제 ]

<div id="n1">나
    <div>첫째 자식</div>
    <div>둘째 자식</div>
    <div>셋째 자식</div>
</div>

<script>

    var n1 = document.getElementById("n1");
    
    console.log(n1.hasChildNodes());   // true
    console.log(n1.childNodes);        // NodeList(7) [text, div, text, div, text, div, text]
    console.log(n1.firstChild);        // "나"
    console.log(n1.lastChild);         // #text
 
</script>

 

[ 자식 태그 접근 프로퍼티 ]

이름	설명
children	자식 태그 리스트를 확인한다.
firstElementChild	첫번째 자식 태그를 확인한다.
lastElementChild	마지막 자식 태그를 확인한다.

 

[ 자식 태그 접근 예제 ]

<div id="n1">나
    <div>첫째 자식</div>
    <div>둘째 자식</div>
    <div>셋째 자식</div>
</div>

<script>

    var n1 = document.getElementById("n1");
    
    console.log(n1.children);          // HTMLCollection(3) [div, div, div]
    console.log(n1.firstElementChild); // <div>첫째 자식</div>
    console.log(n1.lastElementChild);  // <div>셋째 자식</div>    
    
</script>

 

[ 노드 프로퍼티 종류 ]

- 노드(Node): 태그, 속성, PCDATA, 주석, 선언문 등...

  1) nodeType

  - 해당 노드의 타입

  - type: 태그(1), 속성(2), PCDATA(3), 주석(8), 선언문(13)

  2) nodeName 

  - 해당 노드의 이름

  - 태그(태그명), 속성(속성명), PCDATA(#text), 주석(#commnet), 나머지(#xxxx)

  3) nodeValue

  - 해당 노드의 값

  - 태그(null), 속성(속성값), PCDATA(텍스트), 값이 없는 것은 공백

 

[ 자식 태그 조작하기 예제 ]

See the Pen by yhyuk (@yhyuk) on CodePen.

 

 

[ 부모 노드 접근  ]

- 자기 자신을 기준으로 부모 노드를 알려준다. 프로퍼티는 2개인데, 동일한 의미이며 보편적으로 parentNode가 많이쓰인다.

- parentNode

- parentElement

 

[ 형제 노드 접근 ]

- previousElementSibling : 같은 깊이에 있는 형제 노드 중 본인 노드 기준으로 이전 형제 노드에 대한 접근이 가능하다. 

- nextElementSibling : 같은 깊이에 있는 형제 노드 중 본인 노드 기준으로 다음 형제 노드에 대한 접근이 가능하다.

 

2. DOM 제어

[ BOM & DOM 속성(Attribute) 제어 ]

- BOM : HTML의 속성을 JavaScript에서 프로퍼티로 제공한다.

- DOM : getter(), setter() 형식의 읽기/쓰기를 제공한다.

 

[ BOM & DOM 속성 제어 예제 ]

See the Pen BOM, DOM 속성제어 예제 by yhyuk (@yhyuk) on CodePen.

 

[ DOM 제어 예제 1 - <div>태그에 네이버 링크 넣기 ]

See the Pen DOM 예제 1 by yhyuk (@yhyuk) on CodePen.

 

[ DOM 제어 예제 2 - 이미지 삭제하기 ]

See the Pen DOM 예제 2 by yhyuk (@yhyuk) on CodePen.

 

3. DOM 이벤트

[ 이벤트 버블링, 캡쳐링 ]

- 자바스크립트의 이벤트는 기본적으로 버블링을 기반으로 동작한다.

  1) 이벤트 버블링 (Event Bubbling)

  - 자식노드에서 부모노드 순으로 이벤트를 실행한다. ( 아래에서 위로 )

  2) 이벤트 캡쳐링 (Event Capturing)

  - 부모노드에서 자식노드 순으로 이벤트를 실행한다. ( 위에서 밑으로 )

 

[ DOM 이벤트 프로퍼티 ]

  1) addEventListner

  - 함수를 목록으로 관리한다. (Inovacation List)

  - 리스트에 함수를 추가한다.

  2) removeEventListner

  - 리스트에 함수를 제거한다.

 

 [ DOM 이벤트 예제 1 ]

See the Pen DOM 이벤트 예제 by yhyuk (@yhyuk) on CodePen.

 

[ DOM 이벤트 예제 2 ]

See the Pen DOM 이벤트 예제2 by yhyuk (@yhyuk) on CodePen.

 

---

MEMO>
# 오늘 DOM에 대해서 배웠는데, 프로퍼티 이름도 길고, 많이 복잡하고 어려워 보이는데 선생님 말씀대로 하나씩 까보면 별거 없다는 생각으로 계속 공부해보자.

# children 과 childNodes의 차이점은 머릿속에 기억해두자.
  - children: 모든타입 중 태그만 자식으로..
  - childNodes: 모든타입의 노드를 자식으로..

# 이벤트 부분이 원리는 이해가 가는데, 막상 코드를 직접 작성하는게 어렵다. 오늘 주신 문제 꼭 풀 것!!