[혼공스] Ch.07 문서 객체 모델

문서 객체 조작하기

• DOMContentLoaded 이벤트

문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용합니다.

기본적으로는 head 태그 내부에 script 태그를 배치하면 body 태그에 있는 문서 객체(요소)에 접근할 수 없습니다.

head 태그 내부의 script 태그에서 body 태그에 있는 문서에 접근하려면 화면에 문서 객체(요소)를 모두 읽어들일 때까지 기다려야 합니다.

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

document.addEventListener('DOMContentLoaded', () => {
  //문장
}

• 문서 객체 가져오기

HTML 문서에 있는 head 요소와 title 요소 등은 다음과 같은 방법으로 읽어들일 수 있습니다.

document.head
document.body
document.title

//head 요소와 body 요소 내부에 만든 다른 요소들은 다음과 같은 별도의 메소드를 사용합니다.
document.querySelector(선택자)
document.querySelectorAll(선택자)

선택자 부분에는 CSS 선택자를 입력합니다.

CSS 선택자는 매우 다양하지만 기본적인 CSS선택자는 다음과 같습니다.

이름	선택자 형태	설명
태그 선택자	태그	특정 태그를 가진 요소를 추출합니다.
아이디 선택자	#아이디	특정 id 속성을 가진 요소를 추출합니다.
클래스 선택자	.클래스	특정 class 속성을 가진 요소를 추출합니다.
속성 선택자	[속성=값]	특정 속성 값을 갖고 있는 요소를 추출합니다.
후손 선택자	선택자_A 선택자_B	선택자_A 아래에 있는 선택자_B를 선택합니다.

• 글자 조작하기

속성 이름	설명
문서 객체.textContent	입력된 문자열을 그대로 넣습니다.
문서 객체.innerHTML	입력된 문자열을 HTML 형식으로 넣습니다.

• 속성 조작하기

메소드 이름	설명
문서 객체.setAttribute(속성 이름, 값)	특성 속성에 값을 지정합니다.
문서 객체.getAttribute(속성 이름)	특정 속성을 추출합니다.

• 스타일 조작하기

style 속성은 객체이며, 내부에는 속성으로 CSS를 사용해서 지정할 수 있는 스타일들이 있습니다.

자바스크립트에서는 -기호를 식별자에 사용할 수 없으므로 -기호를 제거하고, -기호 뒤의 알파벳을 대문자로 변경합니다.

CSS 속성 이름	자바스크립트 style 속성 이름
background-color	backgroundColor
text-align	textAlign
font-size	fontSize

• 문서 객체

//문서 객체 생성
document.createElement(문서 객체 이름)

//부모 객체 아래에 자식 객체 추가
부모 객체.appendChild(자식 객체)

//문서 객체 제거
부모 객체.removeChild(자식 객체)
문서 객체.parentNode.removeChild(문서 객체)

• 이벤트 설정하기

모든 문서 객체는 생성되거나 클릭되거나 마우스를 위에 올리거나 할때 이벤트라는 것이 발생합니다.

그리고 이 이벤트가 발생할 때 실행할 함수를 이벤트 리스너 또는 이벤트 핸들러라고 부릅니다.

//이벤트가 발생할 때 실행할 함수
//콜백 함수를 이벤트 리스너 또는 이벤트 핸들러라고 부릅니다.
문서 객체.addEventListener(이벤트 이름, 콜백 함수)

//이벤트 제거할 때 실행할 함수
문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)

 

이벤트 활용

• 이벤트 모델

이벤트를 연결하는 방법을 이벤트 모델이라고 부릅니다.

addEventListener() 를 표준 이벤트 모델이라고 부릅니다.

//고전 이벤트 모델
document.body.addEventListener('keyup', () => {

})

//인라인 이벤트 모델
document.body.onkeyup = (event) => {

}

• 키보드 이벤트

이벤트	설명
keydown	키가 눌릴 때 실행됩니다. 키보드를 꾹 누르고 있을 때도, 입력될 때도 실행됩니다.
keypress	키가 입력되었을 때 실행됩니다. 하지만 웹 브라우저에 따라서 아시아권의 문자를 제대로 처리하지 못하는 문제가 있습니다.
keyup	키보드에서 키가 떨어질 때 실행됩니다.

• 키보드 키 코드 사용하기

키보드 이벤트가 발생할 때는 이벤트 객체로 어떤 키를 눌렀는지와 관련된 속성들이 따라옵니다.

여러 속성들이 있지만, 간단하게 살펴보겠습니다.

이벤트 속성 이름	설명
code	입력한 키
keyCode	입력한 키를 나타내는 숫자
altKey	Alt 키를 눌렀는지
ctrlKey	Ctrl 키를 눌렀는지
shiftKey	Shift 키를 눌렀는지

• 글자 입력 양식 이벤트

사용자로부터 어떠한 입력을 받을 때 사용하는 요소를 입력양식(form)이라고 부릅니다.

HTML에서는 input 태그, textarea 태그, button 태그, select 태그 등이 모두 입력 양식입니다.

 

• 체크 박스 활용하기

체크 박스는 일반적인 웹 페이지에서 약관을 읽었는지 확인하거나 SMS 수신 허가, 이메일 수신 허가 등에 사용하는 요소입니다.

체크 박스처럼 체크 상태를 확인할 때는 입력 양식의 checked 속성을 사용합니다.

 

• 기본 이벤트 막기

웹 브라우저는 이미지에서 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴(context menu)를 출력합니다.

이처럼 어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것을 기본 이벤트라고 부릅니다.

링크를 클릭했을 때 이동하는 것, 제출 버튼을 눌렀을 때 이동하는 것 등이 모두 기본 이벤트의 예입니다.

이러한 기본 이벤트를 제거할 때는 event 객체의 preventDefault() 메소드를 사용합니다.

인터넷에서 이미지 불펌방지 등을 구현할 때 사용하는 코드입니다.

 

• localStorage 객체

웹 브라우저가 기본적으로 제공하는 객체입니다. 이 객체는 다음과 같은 메소드를 갖고 있습니다.

• localStorage.getItem(키)

저장된 값을 추출합니다. 없으면 undefined가 나옵니다.

객체의 속성을 추출하는 일반적인 형태로 localStorage.키 또는 localStorage[키] 형태로 사용할 수도 있습니다.

• localStorage.setItem(키, 값)

값을 저장합니다. 이전과 마찬가지로 객체에 속성을 지정하는 일반적인 형태를 사용할 수도 있습니다.

• localStorage.removeItem(키)

특정 키의 값을 제거합니다.

• localStorage.clear()

저장된 모든 값을 제거합니다.