문서객체 : HTML페이지에 있는 html, head, body, title, h1, div, span 등을 HTML에서는 요소라고하고,
자바스크립트에서 문서객체라 합니다.
DOMContentLoaded 이벤트 : 문서객체를 조작할 때 사용합니다.
//DOMContentLoaded에 오타가 나도 오류를 출력하지 않으므로 오타에 주의한다.
document.addEventListener('DOMContentLoaded', () => {
//문장
}
HTML페이지가 코드를 읽는 순서
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body></body>
</html>| 1 | <!DOCTYPE html>이 있으므로 HTML5문서이다 |
| 2 | html태그가 있어 만든다. |
| 3 | head 태그가 있어 만든다. |
| 4 | title 태그가 있어 만든다. |
| 5 | body 태그가 있어 만든다. |
위에서 아래로, 왼쪽에서 오른쪽으로 순서대로 코드를 읽습니다.
<!DOCTYPE html>
<html>
<head>
<script>
const h1 = (text) => `<h1>${text}</h1>`;
</script>
<script>
//body안의 문서객체를 조작하는 이벤트
//body가 아직 읽히지 않았으므로 작동하지않는다.
document.body.innerHTML += h1('1번째 script태그');
</script>
</head>
<body>
<script>
document.body.innerHTML += h1('2번째 script태그');
</script>
<h1>1번째 h1 태그</h1>
<script>
document.body.innerHTML += h1('3번째 script태그');
</script>
<h1>2번째 h1 태그</h1>
</body>
</html>Document.body.innerHTML이벤트는 body안의 문서객체를 조작하는 이벤트입니다.
그러나 아직 HTML이 body를 읽지 않았으므로, head안의 document.body.innerHTML이벤트는 작동하지 못합니다.
따라서 결과는 아래와 같이 body안의 이벤트들만 작동한 것으로 나타납니다.
DOMContentLoaded이벤트는 브라우저가 문서객체를 모두 읽고나서 실행하는 이벤트입니다.
따라서 아래와 같이 작성하면 위에서 작동하지 않았던 이벤트를 작동시킬 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
const h1 = (text) => `<h1>${text}</h1>`;
document.body.innerHTML += h1('문서객체를 모두 읽고 이벤트 발생');
});
</script>
</head>
<body>
<h1>body 내부 값</h1>
</body>
</html>
보이는 결과같이, body내부 h1태그를 읽고, 문서객체를 모두 읽은 뒤 head 내부의 이벤트를 실행하였습니다.
document 객체란 웹페이지 그 자체를 의미합니다.
document.head //웹페이지의 head요소 읽어들이기
document.body //웹페이지의 body요소 읽어들이기
document.title //웹페이지의 title요소 읽어들이기위와같이 head, body, title요소를 읽어들일 수 있습니다.
또한 head와 body요소 내부의 요소들은 다음과 같은 방법으로 접근할 수 있습니다.
document.querySelector(선택자)
document.querySelectorAll(선택자)여기서 선택자는 CSS선택자를 사용하며, 다음과 같이 사용합니다.
| 이름 | 선택자 형태 | 설명 |
| 태그 선택자 | '태그' | 특정 태그를 가진 요소를 추출합니다. |
| 아이디 선택자 | '#아이디' | 특정 id속성을 가진 요소를 추출합니다. |
| 클래스 선택자 | '.클래스' | 특정 class 속성을 가진 요소를 추출합니다. |
| 속성 선택자 | '[속성 = 값]' | 특정 속성 값을 갖고 있는 요소를 추출합니다 |
| 후손 선택자 | '선택바_A 선택자_B' | 선택자_A 아래에 있는 선택자_B를 선택합니다 |
위의 예시와 같이 class로 지정된 loginModalbox는 querySelector에서 .loginModalbox 형태로 선택됐고,
id로 지정된 modalres는 #modalres 형태로 선택된 것을 볼 수 있습니다.
다음으로 querySelectorAll()메소드입니다.
선택자형태는 위와 동일하며, 아래 코드에서는 모든 h1태그에 대한 변경을 한 것을 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
const headers = document.querySelectorAll('h1');
headers.forEach((header) => {
header.textContent = 'HEADERS';
header.style.color = 'white';
header.style.backgroundColor = 'black';
header.style.padding = '10px';
});
});
</script>
</head>
<body>
<h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
</h1>
</body>
</html>
글자 조작하기
| 속성 이름 | 설명 |
| 문서 객체.textContent | 입력된 문자열을 그대로 넣습니다. |
| 문서 객체.innerHTML | 입력된 문자열을 HTML 형식으로 넣습니다. |
<h1></h1>같은 속성을 textContent는 문자열 그대로 출력하지만, innerHTML은 h1요소로 변환시킨다는 뜻입니다.
속성 조작하기
| 메소드 이름 | 설명 |
| 문서객체.setAttribute(속성이름, 값) | 특정 속성에 값을 지정 |
| 문서 객체.getAttribute(속성이름) | 특정 속성을 추출 |
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
const rects = document.querySelectorAll('.rect');
rects.forEach((rect, index) => {
const width = (index + 1) * 100;
const src = `http://placekitten.com/${width}/250`;
rect.setAttruibute('src', src);
//rect.src = src
});
});
</script>
</head>
<body>
<img class="rect" />
<img class="rect" />
<img class="rect" />
<img class="rect" />
</body>
</html>위의 코드와 같이 src라는 속성값에 상수로 선언된 src가 지정되는 것을 볼 수 있습니다.
스타일 조작하기
문서 객체의 스타일을 조작할 때에는 style속성을 사용합니다.
다만, CSS에서 사용할 때와는 다르게,
자바스크립트에서는 - 기호를 식별자에 사용할 수 없으므로 캐멀케이스 방식으로 나타냅니다.
캐멀케이스 방식이란 - 기호를 제거하고, 기호 뒤 알파벳을 대문자로 붙이는 방식을 의미합니다.
| 예시 | |
| CSS속성이름 | 캐멀케이스 속성이름 |
| background-color | backgroundColor |
| text-align | textAlign |
| font-size | fontSize |
style객체는 다음과 같이 조정하며, 첫번째 방식으로 가장 많이 사용합니다.
h1.style.backgroundColor
h1.style['backgroundColor']
h1.style['background-color']
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
const divs = document.querySelectorAll('body>div') //body태그 아래의 div태그 선택
divs.forEach((div,index)=>{
console.log(div,index)
const val = index*10
div.style.height= `10px`
div.style.backgroundColor = `rgba(${val}, ${val}, ${val})`
})
})
</script>
</head>
<body>
<!-- div 태그 25개 -->
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</body>
</html>
querySelectorAll을 사용해 모든 div태그의 높이와, 배경색 style을 바꾼 것을 볼 수 있습니다.
문서 객체 생성하기
어떤 문서객체가 있을 때 위에 있는 것을 부모라하고, 아래에 있는 것을 자식이라고 부릅니다.
document.createElement(문서객체이름)위 메소드를 사용하여 문서객체를 생성하고, 이 문서를 어떤 문서 아래에 추가할지를 지정해줘야 합니다.
부모객체.appendChild(자식객체)위 메소드를 사용하여 어떤 부모객체 아래에 자식객체를 추가 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
const header = document.createElement('h1'); //h1태그 생성
header.textContent = '문서 객체 동적으로 생성하기';
header.setAttribute('data-custom', '사용자 정의 속성');
header.style.color = 'white';
header.style.backgroundColor = 'black';
document.body.appendChild(header);
});
</script>
</head>
<body></body>
</html>위와 같이 새로운 태그를 생성, 조작하여
document.body.appendChild(header)로 body태그 아래에 추가한 것을 볼 수 있습니다.
문서 객체 이동하기
setTimeout(function[, delay])지정한 delay시간(밀리초) 이후 function함수 실행
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
//문서객체 읽어들여 생성하기
const divA = document.querySelector('#first'); //if=first인 태그 선택
const divB = document.querySelector('#second'); //id=second인 태그 선택
const h1 = document.createElement('h1'); //h1태그 생성
h1.textContent = '이동하는 h1 태그';
//번갈아가며 이동시킬 함수
const toFirst = () => {
divA.appendChild(h1); //h1을 divA에 추가
setTimeout(toSecond, 1000); //1초 뒤 toSecond함수 실행
};
const toSecond = () => {
divB.appendChild(h1); //h1을 divB에 추가
setTimeout(toFirst, 5000); //5초 뒤 toFirst함수 실행
};
toFirst(); //초기에 toFirst함수 실행
});
</script>
</head>
<body>
<div id="first">
<h1>첫번째 div 태그 내부</h1>
</div>
<hr />
<div id="second">
<h1>두번째 div 태그 내부</h1>
</div>
</body>
</html>
문서 객체 제거하기
문서 객체를 제거할 때는 removeChild()메소드를 사용합니다.
부모객체.removeChild(자식객체)
위에서 말한 appendChild()메소드로 이미 부모객체와 연결이 됐을 경우,
parentNode속성으로 부모객체에 접근하여 사용합니다.
문서객체.parentNode.removeChild(자식객체)
다음은 특정 개체를 실행하고 3초 후 화면에서 h1태그를 제거하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const h1 = document.querySelector('h1');
h1.parentNode.removeChild(h1); //h1태그의 부모객체 body에 접근하여 제거함
}, 3000); //3초뒤 제거
});
</script>
</head>
<body>
<div>
<hr />
<h1>제거 대상 문서 객체</h1>
<hr />
</div>
</body>
</html>
이벤트 설정하기
문서객체.addEventListener(이벤트이름, 콜백함수)여태까지 썼던 이벤트는 DOMContentLoaded 이벤트가 발생했을 때 콜백함수를 실행해라 라는 의미였습니다.
모든 문서 객체는 생성, 클릭, 마우스를 올릴때 이벤트가 발생하는데, 이 이벤트가 발생할 때 특정 함수를 실행하기 위해
addEventListener()메소드를 사용합니다.
이때의 실행 될 콜백함수를 이벤트리스너 혹은 이벤트핸들러라고 부릅니다.
h1태그를 클릭할 때 콜백함수를 실행하는 예시입니다.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
let counter = 0; //초기값
const h1 = document.querySelector('h1'); //태그지정
h1.addEventListener('click', (event) => {
//h1태그에 이벤트가 발생할 때 콜백함수
counter++;
h1.textContent = `클릭 횟수 : ${counter}`;
});
});
</script>
<style>
/* 클릭할 때 글자가 선택되는걸 방지 */
h1 {
user-select: none;
}
</style>
</head>
<body>
<div>
<h1>클릭 횟수 : 0</h1>
</div>
</body>
</html>
이벤트 제거
문서객체.removeEventListener(이벤트이름, 이벤트리스너)이벤트를 제거 할 때에는 이벤트리스너에 연결때 사용했던 이벤트리스너를 넣습니다.
일반적으로 변수 또는 상수로 이벤트리스너를 만들고, 이를 연결과 제거에 사용합니다.
아래는 이벤트리스너를 상수로 선언해두고, 이벤트를 연결하고 제거하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
let counter = 0; //초기값
let isConnect = false; //초기연결값
const h1 = document.querySelector('h1'); //h1태그 지정
const p = document.querySelector('p'); //p태그 지정
const connectButton = document.querySelector('#connect'); //연결버튼 지정
const disconnectButton = document.querySelector('#disconnect'); //해제버튼 지정
const listener = (event) => {
//연결, 제거에 사용할 리스너
h1.textContent = `클릭 횟수 : ${counter++}`;
};
connectButton.addEventListener('click', () => {
//연결버튼 이벤트 추가
if (isConnect === false) {
//만약 연결되지 않았다면
h1.addEventListener('click', listener); //이벤트 연결
p.textContent = '이벤트 연결 상태 : 연결'; //p태그 문자 변경
isConnect = true; //연결상태 변경
}
});
disconnectButton.addEventListener('click', () => {
//연결해제버튼 이벤트 추가
if (isConnect === true) {
//만약 연결되어있다면
h1.removeEventListener('click', listener); //이벤트 제거
p.textContent = '이벤트 연결 상태 : 해제'; //p태그 문자 변경
isConnect = false; //연결상태 변경
}
});
});
</script>
<style>
/* 클릭할 때 글자가 선택되는걸 방지 */
h1 {
user-select: none;
}
</style>
</head>
<body>
<div>
<h1>클릭 횟수 : 0</h1>
<!-- 이벤트연결버튼 -->
<button id="connect">이벤트 연결</button>
<!-- 이벤트제거버튼 -->
<button id="disconnect">이벤트 제거</button>
<!-- 초기에는 해제된 상태 -->
<p>이벤트 연결 상태 : 해제</p>
</div>
</body>
</html>
'1차 공부 > 공부한 자료' 카테고리의 다른 글
| 외부폰트 가져온 후 특정 스타일드 컴포넌트에 적용하기 (0) | 2022.12.14 |
|---|---|
| 221214 스터디자료 env (0) | 2022.12.14 |
| 221213 UUID 공부자료 (0) | 2022.12.13 |
| 221209 리액트의 기본 (p.455~458) (0) | 2022.12.08 |
| 221205 리액트의 기본 (p. 428~433) (0) | 2022.12.04 |