[JavaScript] DOM & Event

💡 왜 JavaScript를 써야할까?

: 브라우저 화면을 '동적'으로 만들기 위함. 브라우저를 조작할 수 있는 유일한 언어.

 

💡 DOM (Document Object Model)

출처: 위키피디아

: HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스

: 문서를 구조화하고 구조화된 각 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델

 

-> DOM 조작 순서

1. 선택

2. 변경

 

📌 DOM 선택 관련 메서드

• document.querySelector(selector)
  : 제공한 선택자와 일치하는 element 하나 선택 (없다면 null)
• document.querySelectorAll(selector)
  : 제공한 선택자와 일치하는 여러 element를 선택 (nodeList를 반환)
• document.ElementById(id)
• document.ElementByTagName(name)
• document.ElementByClassName(names)

- querySelector, querySelectorAll 사용 권장

: id, class, tag 선택자 등을 모두 사용가능하므로 더 유연

-> class를 선택할때는 . id를 선택할때는 #

ex) document.querySelector('#btn'), document.querySelector('.btn')

 

📌 선택 메서드 반환 타입

- Live Collection

• 문서가 바뀔 때 실시간으로 업데이트 됨
• ex) HTMLCollection, NodeList

- Statcic Collection (non-Live)

• DOM이 변경되어도 collection 내용에는 영향을 주지 않음.
• querySelectorAll의 반환 NodeList만 static collection

 

📌 DOM 변경 관련 메서드

- creation

• Document.createElement(태그명)
  : 작성한 태그 명의 HTML 요소를 생성하여 반환

- append DOM

• Element.append(요소)
  : 특정 부모 node의 자식 NodeList 중 마지막 자식 다음에 Node 객체나 DOMString을 삽입(여러개 추가 가능)
• Node.appendChild(요소)
  : 한 Node를 특정 부모 Node의 자식 NodeList 중 마지막 자식으로 삽입(하나의 Node만 추가 가능)

 

📌 DOM 변경 관련 속성

• Node.innerText = '문자열'
  : Node 객체와 그 자손의 텍스트 컨텐츠를 표현
• Node.innerHTML
  : 요소 내에 표함된 HTML 마크업을 반환
  : XSS 공격에 취약하므로 사용 시 주의

 

📌 DOM 삭제 관련 메서드

• ChildNode.remove(요소)
  : node가 속한 트리에서 해당 Node를 제거
• Node.removeChild(요소)
  : DOM에서 자식 Node를 제거하고 제거한 Node를 반환

 

📌 DOM 속성 관련 메서드

• Element.setAttribute(name, value)
  : 지정된 요소의 값을 설정. 속성이 이미 존재하면 갱신, 존재하지 않으면 새 속성 추가
• Element.getAttribute(attributeName)
  : 해당 요소의 지정된 값을 반환. 인자는 값을 얻고자 하는 속성의 이름

 

💡 Event

: 네트워크 활동이나 사용자의 상호작용 같은 사건의 발생을 알리기 위한 객체

 

-> 이벤트 발생

•  마우스를 클릭하거나 키보드를 누르는 등 사용자 행동으로 발생할 수도 있음
•  특정 메서드를 호출(Element.click())하여 프로그래밍적으로 만들어 낼 수 있음

 

📌 Event handler

• EventTarget.addEventListener()
  : 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정
• target.addEventListener(type, listner[, options])
  - type : 반응할 이벤트 유형
  - listner : 지정된 이벤트가 발생했을 때 알림을 받는 객체 (EventListener 인터페이스 혹은 JS function(콜백 함수) 객체여야함.)

📌 Event 취소

• Event.preventDefault()
  : 현재 이벤트의 기본 동작을 중단, 태그의 기본 동작을 작동하지 않게 막음