[JavaScript] DOM 조작 및 이벤트 처리 정리

DOM(Document Object Model)

- 문서의 구조화된 표현 제공
- HTML 문서를 구조화하여 각 요소를 객체 취급
- DOM의 구조(문서를 논리 트리로 표현)

출처 : https://en.wikipedia.org/wiki/Document_Object_Model

- DOM은 HTML 요소, 속 텍스트 등 모든 것을 Node로 구성

Window Object
- DOM을 표현하는 창으로 가장 최상위의 객체를 의미

Document Object
- 브라우저가 불러온 웹 페이지
- document는 window의 속성

선택 관련 메서드

// 제공한 선택자와 일치하는 요소 1개 선택
// 제공한 CSS Selector를 만족하는 첫번쨰 요소를 반환(없으면 null)
document.querySelector(selector)

// 제공한 선택자와 일치하는 여러 요소 선택
// 제공한 CSS Selector를 만족하는 nodeList 반환
document.querySelectorAll(selector)

console.log(document.querySelector('#title')
console.log(document.querySelectorAll('.text'))
...

// 작성한 element의 HTML 요소를 생성하여 반환 메서드
document.createElement(element)

// 노드 객체와 그 자손의 텍스트 컨텐츠를 표현
HTMLElement.intnerText

// 한 노드를 특정 부모 노드의 자식 NodeList 중 마지막 자식으로 삽입
Node.appendChild()

// 자식 노드 제거
Node.removeChild()

// 해당 요소의 지정된 문자열(값)을 반환
Element.getAttribute(attributeName)

// 지정된 요소 값을 설정
Element.setAttribute(name, value)

// 해당 속성이 이미 존재할 경우 갱신
Element.setAttribute(name, value)

// 요소의 각 속성 제어
Element.classList
Element.stye
...

EVENT

- 주로 Event를 받고 처리하기 위해 addEventListener() 메서드 사용
- 특별한 함수가 아닌 일반적인 JavaScript Function을 정의하여 사용
- addEventListener에서 콜백함수는 호출 대상을 뜻하므로 function 키워드만 사

// addEventListener() 구조
EventTarget.addEventListener(type, handler, function)

// ex) 버튼을 클릭하면 특정 이벤트를 주고 싶을 경우 (누르면 버튼 눌렀다는 로그 출력)

const btn = document.querySelector('#버튼id값')
btn.addEventListener('click', function() {
  console.log('버튼 클릭')
})

// ex) 버튼을 클릭하면 특정 이벤트를 주고 싶을 경우 (누르면 특정 변수 값 변경)
let number = 0 
const btn = document.querySelector('#버튼id값')
btn.addEventListener('click', function() {
  number += 1
  const counter = document.querySelector('#반영할태그의id값')
  counter.innerText = number
})

// ex) input에 값을 입력하면 값을 출력하기
const textinput = document.querySelector('#inputid값') 
textinput.document.('input', function(event)[
  // input에 작성한 값을 p 태그로 출력
  const pTag = document.querySelector('p') 
  pTag.innerText = event.target.value
})​

- DOM 요소에서 발생한 이벤트가 상위 노드에서 하위 노드 혹은 하위 노드에서 상위 노드로 전파되는 현상인 Event 전파 상황 제어 가능

// Event의 기본 동작을 중단 (a태그 이동을 막는 등)
event.preventDefault()

// 복사를 막는 예시 html에 h1 태그가 있다 가정
const h1 = document.querySelector('h1')
  h1.addEventListener('copy', function(event){
  event.preventDefault()
  console.log("복사불가")
})

- 여러 상황에 대해 다양한 이벤트를 지정할 수 있음

// 로또 랜덤 생성 만들기 (id = "lotto"인 버튼과 id ='result'인 div가 있다고 사정)
const button = document.querySelector('#lotto')
button.addEventListener('click', function(){
  const container = document.createElement('div')
  container.classList.add('container')
  
  const nums = _.sampleSize(_.range(1, 46),6) // 랜덤 숫자 6개 뽑기
  
  num.forEach(number) => {
    const ball = document.createElement('div')
    ball.classList.add('ball')
    ball.innerText = number
    ball.style.backgroundColor = 'red'
    container.appendChild(ball)
  })
  
  const result = document.querySelector('#result')
  result.appendChild(container)
})