1. 문서 객체 모델 DOM Document Object Model
👩🏻💻 문서 객체를 조합해서 만든 전체적인 형태를 말함
👩🏻💻 자바 스크립트를 사용하는 목적은 html을 다루는 것
▶️ 자바 스크립트에서는 html 요소를 문서 객체 document object를 이용해 조작을 함
👩🏻💻 HTML 페이지는 코드를 위에서 아래로 차례대로 실행
➡️ body 태그 생성되기 이전인 head 태그에서 body 태그에 무언가 출력하려면 문제 발생
➡️ 기본적으로 head 태그 내부에 script 태그를 배치하면 body 태그에 있는 문서 객체(요소)에 접근 불가
<head>
<script>
const h1 = (text) => `<h1>${text}</h1>`;
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.body.innerHTML += h1('1번째 script 태그');
});
</script>
</head>
<body>
<h1>1번째 h1 태그</h1>
<script>
document.body.innerHTML += h1('3번째 script 태그');
</script>
<h1>2번째 h1 태그</h1>
</body>
(1) DOMContentLoaded 이벤트
💡 DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행
▶️ script 태그가 body 태그 이전에 위치해도 문제없이 코드 실행
<script>
// DOMContentLoaded를 연결. DOMContentLoaded 상태가 되었을 때 콜백 함수를 호출
document.addEventListener('DOMContentLoaded', () => {
const h1 = (text) => `<h1>${text}</h1>`;
document.body.innerHTML += h1('DocumentLoaded 이벤트 발생');
});
</script>
📌 DOMContentLoaded 사용한 배경색 변경 예제
<head>
<script>
document.addEventListener('DOMContentLoaded', function () {
const changeBtn = document.querySelector('#changeBtn');
const resetBtn = document.querySelector('#resetBtn');
let i = 0;
const bodyTag = document.querySelector('body');
const color = ['red', 'orange', 'yellow', 'blue'];
const handleColor = () => {
bodyTag.style.backgroundColor = color[i++ % color.length];
}
changeBtn.addEventListener('click', handleColor);
resetBtn.addEventListener('click', () => {
changeBtn.removeEventListener('click', handleColor);
bodyTag.style.backgroundColor = '';
})
})
</script>
</head>
<body>
<button id="changeBtn">배경색 변경</button>
<button id="resetBtn">배경색 초기화</button>
</body>
💡 addEventListener('이벤트', '콜백함수') 메소드
- document라는 문서 객체의 이벤트가 발생했을 때, 매개변수로 지정한 콜백 함수를 실행하라는 의미
(2) 문서 객체 가져오기
document.head / document.body / document.title
👩🏻💻 head와 body 요소 내부에 다른 요소들은 다음과 같은 별도의 메소드를 사용해서 접근
⚡️ document.querySelector(선택자) : 요소를 하나만 추출
⚡️ document.querySelectorAll(선택자) : 선택자에 해당하는 모든 문서 객체를 배열로 가져옴
👩🏻💻 선택자 부분에는 CSS 선택자를 입력
| 이름 | 선택자 형태 | 설명 |
| 태그 선택자 | 태그 | 특정 태그를 가진 요소를 추출 |
| 아이디 선택자 | #아이디 | 특정 id 속성을 가진 요소를 추출 |
| 클래스 선택자 | .클래스 | 특정 class 속성을 가진 요소를 추출 |
| 속성 선택자 | [속성=값] | 특정 속성 값을 갖고 있는 요소 추출 |
| 후손 선택자 | 선택자_A 선택자_B | 선택자_A 아래에 있는 선택자_B 선택 |
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
const header = document.querySelector('h1'); // 요소를 읽어들임. 제일 먼저 나오는 요소 하나만 가져옴.
// 텍스트와 스타일을 변경.
header.textContent = 'HEADERS';
header.style.color = 'white';
header.style.backgroundColor = 'black';
header.style.padding = '10px';
const headersAll = document.querySelectorAll('h2'); // 요소를 읽어들임.
console.log(headersAll)
headersAll.forEach((item) => { // 일반적으로 forEach() 메소드를 사용해서 반복을 돌림.
item.textContent = 'headersAll';
item.style.color = 'red';
item.style.backgroundColor = 'black';
item.style.padding = '20px';
})
// 1. for문을 사용해서 글자색을 빨강으로 변경
for(let idx = 0; idx < headersAll.length; idx++) {
headersAll[idx].style.color = 'red';
}
// 2. for in 문을 사용해서 글자색을 파랑으로 변경
for(let idx in [...headersAll]) {
headersAll[idx].style.color = 'blue';
}
// 3. for of 문을 사용해서 글자색을 주황으로 변경
for(const i of headersAll) {
i.style.color = 'orange';
}
})
</script>
</head>
<body>
<h1></h1>
<h1>2</h1>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
</body>
[ 내용참고 : IT 학원 강의 및 책 '혼자 공부하는 자바스크립트' ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 이벤트 핸들러 등록과 제거 (0) | 2024.04.02 |
|---|---|
| [JavaScript] 글자·스타일·속성 조작하기, 문서 객체 생성·이동·제거하기 (0) | 2024.04.02 |
| [JavaScript] 타이머 함수, 기본 매개변수, 즉시 호출 함수, 엄격모드 (0) | 2024.03.31 |
| [JavaScript] 재귀 함수, 콜백 함수, 화살표 함수 (0) | 2024.03.30 |
| [JavaScript] 나머지 매개변수와 전개 연산자 (0) | 2024.03.29 |
