안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 javascript 6편입니다.
문서 객체 조작하기
문서 객체를 조작한다는 말은 html 요소들을 조작한다는 의미입니다.
DOMContentLoaded 이벤트
문서 객체를 조작할 때 사용하는 코드입니다.
DOMContentLoaded 문자열은 오탈자를 입력해도 오류가 발생하지 않습니다.
주의해야겠어요.
DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트입니다.
document.addEventListener('DOMContentLoaded', () => {
// 내용
}그럼 예시를 한 번 볼까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./main.js"></script>
<title>DOMContentLoaded</title>
</head>
<body>
</body>
</html>document.addEventListener('DOMContentLoaded', () => {
const h1 = (text) => `<h1>${text}</h1>`
document.body.innerHTML += h1('DOMContentLoaded 이벤트 발생')
})
html에는 h1 태그가 없는데요.
자바스크립트에서 innerHTML코드를 이용해 html body 부분에 h1 태그를 이용한 제목을 넣어주고 있어요.
문서 객체 가져오기
document.body 코드를 사용하면 html의 body요소를 읽어들입니다.
document.head 코드는 html의 head요소를, document.title은 title 요소를 읽어들이죠.
document.querySelector(선택자)
document.querySelectorAll(선택자)선택자 부분에는 CSS 선택자를 입력합니다!
그럼 이제 querySelector와 querySelectorAll 메소드를 알아볼게요.
이름에서 알 수 있듯 querySelector 메소드는 하나의 요소를,
querySelectorAll메소드는 여러개의 요소를 추출합니다.
querySelector
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./main.js"></script>
<title>DOMContentLoaded</title>
</head>
<body>
</body>
</html>document.addEventListener('DOMContentLoaded', () => {
const header = document.querySelector('h1');
header.textContent = 'HEADERS';
header.style.color = 'white';
header.style.backgroundColor = 'black';
header.style.padding = '10px';
})h1 태그 이름으로 요소를 선택하고, 아래에서 텍스트와 스타일을 변경했습니다.
실제 html에서 h1태그엔 아무 내용이 없지만, javascript에서 조작한 모습입니다.
querySelectorAll
querySeletorAll 메소드는 문서 객체 여러 개를 배열로 읽어들입니다.
따라서, 내부 요소에 접근해 활용하려면 반복이 필요하죠.
일반적으로 반복을 돌릴 땐 forEach() 메소드를 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./main.js"></script>
<title>DOMContentLoaded</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>document.addEventListener('DOMContentLoaded', () => {
const header = document.querySelectorAll('div');
header.forEach((header) => {
header.textContent = 'HEADERS';
header.style.color = 'white';
header.style.backgroundColor = 'black';
header.style.padding = '10px';
})
})div 태그 이름의 여러 요소를 선택하고, 아래에서 텍스트와 스타일을 변경했습니다.
글자 조작하기
문서객체.textContent입력된 문자열을 그대로 삽입합니다.
문서객체.innerHTML입력된 문자열을 html 형식으로 삽입합니다.
무슨 차이인지 예시를 통해 살펴보죠.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./main.js"></script>
<title>DOMContentLoaded</title>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>document.addEventListener('DOMContentLoaded', () => {
const a = document.querySelector('.a');
const b = document.querySelector('.b');
a.textContent = '<h1>textContet속성</h1>'
b.innerHTML = '<h1>innerHTML속성</h1>'
})html에 div class로 각각 a, b가 할당되었네요.
그리고 a에는 textContent, b에는 innerHTML 속성을 사용했습니다.
textContent의 경우 내용이 전부 문자열 그대로 들어갔고, innerHTML의 경우 h1태그가 적용된 모습입니다.
