JavaScript

Chapter 07. 문서 객체 모델

차돌박이츄베릅 2023. 4. 29. 18:14
  • 문서 객체(document object) : HTML 요소(element)
  • 문서 객체 모델(DOM, Document Objects Model) : 문서 객체를 조합해서 만든 전체적인 형태. Document(HTML 파일)를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 것
  • 문서 객체 트리(tree) 구조
  • 부모(parent)
  • 자식(child)
  • Node 객체의 속성은 해당 객체의 특성을 나타내는 값을 가져오거나 설정하는 데 사용되며, 
    메서드는 해당 객체가 수행하는 작업을 나타내는 함수입니다.
    예) Node 객체의 nodeName 속성은 해당 노드의 이름을 나타내는 문자열 값을 반환합니다.
    반면에 appendChild() 메서드는 해당 노드의 자식 노드를 추가하는 메서드이며, DOM 트리에서 해당 노드의 위치를 변경하는 동작을 수행합니다.

 

DOMContentLoaded 이벤트

웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트

document.addEventListener('DOMContentLoaded', () => {
    // DOMContentLoaded 상태가 되었을 때 콜백 함수 호출
})
document.onload = function() {
    // 구 버전 방식
}
document.addEventListener('load', function () {
    // 구 버전 방식
})

 

문서 객체 가져오기

항상 돔트리의 최상단 노드는 document

querySelectorAll는 문서 객체 여러개를 배열로 읽어옴

// 추천 방법
document.querySelector('선택자')

const 요소들 = document.querySelectorAll('선택자')
요소들.forEach((요소) => {
    // 문장
})
// 해당 id명을 가진 요소 하나를 반환합니다.
document.getElementById("id명")
// 해당 선택자를 만족하는 요소 하나를 반환합니다.
document.querySelector("선택자")
// 해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByClassName("class명")[인덱스]
// 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByTagName("태그명")[인덱스]
// 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환합니다.
document.querySelectorAll("선택자명")[인덱스]
// 새로운 노드를 생성합니다.
const div = document.createElement('div');
document.body.append(div);
document.body.append(div);

 

글자 조작하기

  • 문서 객체.textContent : 입력된 문자열을 그대로 넣음
  • 문서 객체.innerHTML : 입력된 문자열을 HTML 형식으로 넣음
// 이 둘은 차이가 있어요!
element.innerHTML = new html content
element.innerText = new text

 

속성 조작하기

  • 문서 객체.setAttribute(속성 이름, 값) : 특정 속성에 값을 지정
  • 문서 객체.getAttribute(속성 이름) : 특정 속성 추출
  • 문서 객체.속성 이름 : HTML 표준에 정의된 속성의 간단한 사용방법
// style을 바꿔요.
element.style.property = new style
element.style.backgroundColor = "red";

// method를 통해 클래스를 추가해봐요.
element.setAttribute(attribute, value)

// style을 바꾸는 다른 방법
element.setAttribute("style", "background-color:red;");
 

 

스타일 조작하기

  • 문서 객체.style.backgroundColor // 가장 많이 사용
  • 문서 객체.style['backgroundColor']
  • 문서 객체.style['background-color']

 

문서 객체 생성, 추가, 삭제

  • document.createElement(문서 객체 이름) : 문서 객체 생성
  • 부모 객체.appendChild(자식 객체) : 부모 객체 아래에 자식 개체를 추가. 문서 객체의 부모(parent)는 하나여야만 해서 다른 문서 객체에 추가하면 이동하게 됨
  • 문서 객체.parentNode.removeChild(문서 객체) : 부모 객체와 이미 연결이 완료된 문서 객체의 경우 parentNode 속성으로 부모 객체에 접근할 수 있음
// createElements
const para = document.createElement("p");
para.innerText = "This is a paragraph";
document.body.appendChild(para);

 

이벤트 설정하기

이벤트가 발생할 때 실행할 콜백 함수를 이벤트 리스너(event listener) 또는 이벤트 핸들러(event handler)라고 부름

  • 문서 객체.addEventListener(이벤트 이름, 콜백 함수)
  • 문서 객체.removeEventListener(이벤트 이름, 변수 또는 상수로 만든 이벤트 리스너)
// version 01
element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

// version 02
element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

 

 

 

 

이벤트 모델(event model)

이벤트를 연결하는 방법.

모든 이벤트 모델의 이벤트 리스너는 첫 번째 매개변수로 이벤트와 관련된 정보가 들어있는 이벤트 객체(event object)를 받음

// 표준 이벤트 모델 - 현재 많이 사용
document.body.addEventListener('keyup', () => {
})

// 고전 이벤트 모델
document.body.onkeyup = (event) => {
}

// 인라인 이벤트 모델 - 현재 많이 사용
const listener = (event) => {
}
<body onkeyup="listener(event)"></body>

 

키보드 이벤트

keydown과 keypress는 이슈가 있어서 일반적으로 keyup 사용하나, keyup도 이슈가 있어서 결국은 키보드 이벤트를 사용하지 않고 타이머와 focus, blur 사용

  • keydown : 키 눌릴 때 실행
  • keypress : 키가 입력되었을 때 실행. IME입력문자(아시아권 조합형 문자)는 공백이 들어가기 전까지는 글자 수를 세지 않는 이슈가 있음
  • keyup : 키가 떨어질 때 실행. 특정 키를 꾹 누르고 있으면 글자 수를 제대로 못 세는 이슈가 있음

 

키보드 키 코드 사용

  • event.code : 입력한 키를 나타내는 문자열. 익스플로러와 엣지 지원하지 않음
    typeof(event.code) !== 'undefined' ? event.code : event.keyCode // code가 없으면 keyCode 출력하도록
  • event.keyCode : 입력한 키를 나타내는 숫자
  • event.altKey : alt키를 눌렀는지 불 자료값
  • event.ctrlKey : ctrl키를 눌렀는지 불 자료값
  • event.shiftKey : shift키를 눌렀는지 불 자료값

 

이벤트 발생 객체

코드 규모가 커지면 이벤트 리스너를 외부로 분리하는 경우, 이벤트를 발생시킨 객체에 접근하기

  • event.currentTarget 속성을 사용 : () => {}와  function() {} 형태 모두 사용 가능
  • this 키워드를 사용 : 화살표 함수가 아닌 function() {} 형태로 함수를 선언한 경우에 사용

 

조기 리턴(early return)

if else 키워드를 사용하지 않고 return 키워드로 리턴하면 들여쓰기 단계를 줄일 수 있어 코드가 깔끔해짐. 자주 사용하는 형태의 코드

 

글자 입력 양식의 change 이벤트

입력 양식은 값이 변경될 때 change 이벤트 발생. 글자 입력 양식은 focus, blur 이벤트

 

프로그래밍 언어는 소수점을 가진 숫자 계산에 오차가 있으므로

toFixed() 메소드 사용해서 소수 둘째 자리까지 자르기

 

드롭다운

multiple select 태그의 경우에는 for of 반복문 돌려서 .selected 속성을 확인(options 속성에는 forEach()메소드가 없음..  무슨말이지)

const select = document.querySelector('select')
select.addEventListener('change', (event) => {
    const options = event.currentTarget.options
    const index = event.currentTarget.options.selectedIndex
})

 

체크 박스

const chechbox = document.querySelector('input')
chechbox.addEventListener('change', (event) => {
    if (event.currentTarget.checked) {}
})

 

라디오 박스

const radios = document.querySelectorAll('[name=라디오그룹]')
radios.forEach((radio) => {
    radio.addEventListener('change', (event) => {
        const current = event.currentTarget
        if (current.checked) {}
    })
})

 

기본 이벤트 막기

const imgs = document.querySelectorAll('img')
imgs.forEach((img) => {
    img.addEventListener('contextmenu', (event) => {
        event.preventDefault()
    })
})

 

프로그래밍 틀 ?

  1. 문서 객체 가져오기
  2. 변수 선언
  3. 함수 선언
  4. 객체 조작
  5. 이벤트 연결

 

localStorage 객체

웹 브라우저가 기본적으로 제공하는 웹 API 객체.

새로 고침해도 입력값이 그대로 남아있게 할 수 있음

  • localStorage.getItem(키) : 저장된 값 추출. 없으면 undefined.
    사용시에는 localStorage.키 또는 localStorage[키]
  • localStorage.setItem(키, 값) : 값을 저장
  • localStorage.removeItem(키) : 특정 키의 값을 제거
  • localStorage.clear() : 저장된 모든 값을 제거