문서 객체 모델 (DOM)
문서 객체 모델 (Document Objects Model)
•
문서 객체를 조합해서 만든 전체적인 형태
DOMContentLoaded 이벤트
•
HTML 코드를 JS로 조작
•
HTML 각각 요소가 JS에서 문서객체이다
◦
innerHTML
▪
body 태그가 생성되기 이전에 script 태그로 body 태그를 조작
•
DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트
<script>
// DOMContentLoaded 이벤트를 연결
document.addEventListerner('DOMContentLoaded', () => {
const h1 = (text) => '<h1>${text}</h1>'
document.body.innerHTML += h1('DOMContentLoaded 이벤트 발생')
// 문서 객체를 모두 읽어들이면 이 콜백함수가 실행
})
</script>
<body>
</body> -> body에 포함될 것이다
JavaScript
복사
•
다음과 같이 코드를 구성하면 DOMContented 상태가 되었을 때 콜백 함수를 호출
문서 객체 가져오기
•
document.body 코드를 사용하여 문서의 body 요소 읽기
document.head
document.body
document.title
// 직접 태그
JavaScript
복사
•
head 요소와 body 요소 내부에 만든 다른 요소들은 다음과 같은 별도의 메소드르 사용
document.querySelector(선택자)
document.querySelectorAll(선택자)
JavaScript
복사
이름 | 선택자 | 설명 |
태그 선택자 | 태그 | 특정 태그를 가진 요소를 추출 |
아이디 선택자 | #아이디 | 특정 id 속성을 가진 요소를 추출 |
클래스 선택자 | .클래스 | 특정 class 속성을 가진 요소를 추출 |
속성 선택자 | [속성 = 값] | 특정 속성 값을 갖고 있는 요소를 추출 |
후손 선택자 | 선택자_A 선택자_B | 선택자_A 아래에 있는 선택자_B를 선택 |
예제) querySelector() 메소드를 사용해서 h1 태그를 추출하고 조작하기
<script>
document.addEventListener('DOMContentLoaded', () => {
// 요소 읽어들인다
const header = document.queryselector('h1')
// h1 태그 이름으로 요소를 선택
// 텍스트와 스타일을 변경한다
header.textContent = 'HEADERS'
header.style.color = 'white'
header.style.backgroundColor = 'black'
header.style.padding = '10px'
})
</script>
JavaScript
복사
예제) querySelectorAll() 메소드 : 문서 객체 여러개를 배열로 읽어들이는 함수
<script>
document.addEventListener('DOMContentLoaded', () => {
// 요소 읽어들인다
const header = document.queryselector('h1')
// h1 태그 이름으로 요소를 선택
// 텍스트와 스타일을 변경한다
header.forEach((header) => {
header.textContent = 'HEADERS'
header.style.color = 'white'
header.style.backgroundColor = 'black'
header.style.padding = '10px'
})
})
</script>
<body>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
</body>
JavaScript
복사
글자 조작하기
속성 이름 | 설명 |
문서 객체.textContent | 입력된 문자열을 그대로 기입 |
문서 객체.innerHTML | 입력된 문자열을 HTML 형식으로 기입 |
속성 조작하기
메소드 이름 | 설명 |
문서 객체.setAttribute(속성 이름, 값) | 특정 속성에 값을 지정 |
문서 객체.getAttribute(속성 이름) | 특정 속성을 추출 |
스타일 조작하기
CSS 속성 이름 | 자바스크립트 style 속성 이름 |
background-color | backgroundColor |
text-align | textAlign |
font-size | fontSize |
문서 객체 생성하기
•
document.createElement() 메소드를 사용
document.createElement(문서 객체 이름)
JavaScript
복사
•
문서 객체 트리(tree) 구조
◦
문서를 어떤 문서 아래에 추가할 지를 지정
부모 객체.appendChild(자식 객체)
document.body.appendChild(head)
JavaScript
복사
문서 객체 이동하기
•
appendChild() 메소드는 문서 객체를 이동할 때도 사용
◦
문서 객체의 부모(parent)는 언제나 하나여야 하고,
◦
문서 객체를 다른 문서 객체에 추가하면 문서 객체가 이동
부모 객체.appendChild(자식 객체)
JavaScript
복사
문서 객체 제거하기
•
removeChild() : 문서 객체를 제거
•
appendChild() 메소드 등으로 부모 객체와 이미 연결이 완료된 문서 객체의 경우
•
parentNode 속성으로 부모 객체에 접근할 수 있으므로,
•
일반적으로 어떤 문서 객체를 제거할 때는 다음과 같은 형태의 코드를 사용
문서 객체.parentNode.removeChild(문서 객체)
h1.parentNode.removeChild(h1)
document.body.removeChild(h1)
JavaScript
복사
이벤트 설정하기
•
addEventListener() 메소드
문서 객체.addEventListener(이벤트 이름, 콜백 함수)
JavaScript
복사
•
removeEventListener() 메소드
문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)
JavaScript
복사
const listener = (envet) => {
h1.textContent = '클릭 횟수 : ${counter++}'
}
// 이벤트를 제거하려면, 이벤트 리스너를 변수 또는 상수로 가지고 있어야함
JavaScript
복사
요약
•
DOMContentLoaded 이벤트는 HTML 페이지의 모든 문서 객체(요소)를 웹 브라우저가 읽어들였을 때 발생시킨다
•
querySelector() 메소드는 문서 객체를 선택할 때, 사용하는 메소드
•
textContent 속성과 innerHTML 속성은 문서 객체 내부의 글자를 조작할 때 사용하는 속성
•
style 속성은 문서 객체의 스타일을 조작할 때 사용하는 속성
•
이벤트 리스너(이벤트 핸들러)는 이벤트가 발생할 때 실행하는 함수를 의미
이벤트 활용
이벤트 모델 → 이벤트 연결하는 방법
•
표준 이벤트 모델 : addEventlistener() → 가장 많이 씀
•
고전 이벤트 모델 : 문서 객체가 가지고 있는 on.. 으로 시작하는 속성에 함수를 할당해서 이벤트를 연결
◦
이벤트 종류 한 종류만 사용 가능 → 권장 x
•
인라인 이벤트 모델 : on..으로 시작하는 속성을 HTML 요소에 직접 넣어서 이벤트를 연결
키보드 이벤트
•
keydown
◦
키가 눌릴 때
•
keypress
◦
키가 입력되었을 때 실행
•
keyup
◦
키보드에서 키가 떨어질 때
키보드 키 코드 사용하기
이벤트 속성 이름 | 선택자 형태 |
code | 입력한 키 |
keyCode | 입력한 키를 나타내는 숫자 |
altKey | [Alt] 키 눌렀는지 |
ctrlKey | [Ctrl] 키 눌렀는지 |
shiftKey | [Shift] 키 눌렀는지 |
이벤트 발생 객체
•
이벤트 리스너 내부에서 어떤 변수에 접근할 수 없는 경우
◦
이벤트 리스너를 외부로 빼낸 경우 → 가져다 쓸 수 없다
→ 해결 방법
1.
event.currentTarget 속성 사용
event.currentTarget.value.length
JavaScript
복사
2.
this 키워드 사용
this.value.length
JavaScript
복사
글자 입력 양식 이벤트
localStorage 객체
•
웹브라우저에 데이터를 저장하는 localStorage 객체와 활용
◦
localStorage.getItem(키) - 저장된 값을 추출, 없으면 undefined가 나옴
▪
객체의 속성을 추출하는 일반적인 형태로 localStorage.
▪
키 또는 localStorage[키] 형태로 사용할 수도 있음
◦
localStorage.setItem(키, 값), 값을 저장
▪
이전과 마찬가지로 객체에 속성을 지정하는 일반적인 형태를 사용할 수도 있음
◦
localStorage.removeItem(키) - 특정 키의 값을 제거
◦
localStorage.clear() - 저장된 모든 값을 제거