A Developing Developer
07-1. 문서 객체 조작하기 본문
- DOMContentLoaded : HTML 페이지의 모든 문서 객체(요소)를 웹 브라우저가 읽어들였을 때 발생시키는 이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1-DOMContentLoaded 이벤트</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 문장
})
</script>
</head>
<body>
</body>
</html>document.addEventListener('DOMContentLoaded', () => {
const h1 = (text) => `<h1>${text}</h1>`
document.body.innerHTML += h1('DOMContentLoaded 이벤트 발생')
})
- 문서 객체 가져오기
document.body : 문서의 body 요소를 읽어드릴 수 있다.
document.head : 문서의 head 요소를 읽어드릴 수 있다.
document.title : 문서의 title 요소를 읽어드릴 수 있다.
이름 선택자 형태 설명
태그 선택자 태그 특정 태그를 가진 요소를 추출한다.
아이디 선택자 #아이디 특정 id 속성을 가진 요소를 추출한다.
클래스 선택자 .클래스 특정 class 속성을 가진 요소를 추출한다.
속성 선택자 [속성=값] 특정 속성 값을 갖고 있는 요소를 추출한다.
후손 손택자 선택자_A 선택자_B 선택자_A 아래에 있는 선택자_B를 선택합니다.
- querySelector() : 문서 객체를 선택할 때 사용하는 메소드
document.querySelector(선택자) // 요소를 하나만 추출
document.querySelectorAll(선택자) // 문서 객체를 여러 개 추출- querySelector() 메소드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>querySelector</title>
<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>
</head>
<body>
<h1></h1>
</body>
</html>
- querySelectorAll() 메소드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>querySelectorAll</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 요소를 읽어들인다.
const headers = document.querySelectorAll('h1') // h1 태그 이름으로 요소를 선택
// 텍스트와 스타일 변경
// 일반적으로 forEach() 메소드를 사용해서 반복을 돌린다.
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>
</body>
</html>
- textContent : 문서 객체 내부의 글자를 조작할 때 사용, 글자 그대로, 태그 적용 x
- innerHTML : 문서 객체 내부의 글자를 조작할 때 사용, <h1> 과 같은 태그도 적용
- textContent, innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>글자 조작하기</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const a = document.querySelector('#a')
const b = document.querySelector('#b')
a.textContent = '<h1>textContent 속성</h1>'
b.innerHTML = '<h1>innerHTML 속성</h1>'
})
</script>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>
- 속성 조작하기
메소드 이름 설명
문서 객체.setAtrribute(속성 이름, 값) 특정 속성에 값을 지정한다.
문서 객체.getAttribute(속성 이름) 특정 속성을 추룰한다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>속성 조작하기</title>
<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.setAttribute('src', src) // src 속성에 값을 지정
// })
// HTML 표준에 정의된 속성 중 간단한 사용 방법, setAttribute() 와 getAttribute() 메소드를 사용하지 않고 온점을 찍고 속성을 바로 읽거나 지정 할 수 있다.
rects.forEach((rect, index) => {
const width = (index + 1) * 100
const src = `http://placekitten.com/${width}/250`
rect.src = src
})
})
</script>
</head>
<body>
<img class="rect">
<img class="rect">
<img class="rect">
<img class="rect">
</body>
</html>
- style : 문서 객체의 스타일을 조작할 때 사용하는 속성
CSS 속성 이름 자바스크립트 style 속성 이름
background-color backgroundColor
text-align textAlign
font-size fontSize// h1.style.backgroundColor -> 이 형태를 가장 많이 사용
// h1.style['backgroundColor']
// h1.style['background-color']<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>스타일 조작하기</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const divs = document.querySelectorAll('body > div') // body 태그 아래에 있는 div 태그를 선택
divs.forEach((div, index) => { // div 개수만큼 반복 출력
console.log(div, index)
const val = index * 10
div.style.height = `10px`
div.style.backgroundColor = `rgba(${val}, ${val}, ${val}`
})
})
</script>
</head>
<body>
<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>
- 문서 객체 생성하기
document.createElement()
// document.createElement(문서 객체 이름)그런데 문서 객체를 만들었다고 문서 객체가 배치되는 것은 아니다. 문서를 어떤 문서 아래에 추가 할지 지정해 줘야한다.
이러한 것을 프로그래밍에서는 트리(tree) 라고 부른다.
어떤 문서 객체가 있을 때 위에 있는 것을 부모(parent), 아래에 있는 것을 자식(child) 라고 부른다.
문서 객체에는 appendChild() 메소드가 있는데, 어떤 부모 객체 아래에 자식 객체를 추가 할 수 있다.
// 부모 객체.appendChild(자식 객체)
- 문서 객체 생성하고 추가하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>문서 객체 생성하고 추가하기</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 문서 객체 생성하기
const header = document.createElement('h1') // h1 태그 생성
// 생성한 태그 조작하기
header.textContent = '문서 객체 동적으로 생성하기'
header.setAttribute('data-custom', '사용자 정의 속성')
header.style.color = 'white'
header.style.backgroundColor = 'black'
// h1 태그를 body 태그 아래에 추가하기
document.body.appendChild(header)
})
</script>
</head>
<body>
</body>
</html>
- 문서 객체 이동하기
appendChild() // 문서 객체를 이동할 때도 사용<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>문서 객체 이동하기</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 문서 객체 읽ㅇ거들이고 생성하기
const divA = document.querySelector('#first')
const divB = document.querySelector('#second')
const h1 = document.createElement('h1')
h1.textContent = '이동하는 h1 태그'
// 서로 번갈아가면서 실행하는 함수
const toFirst = () => {
divA.appendChild(h1)
setTimeout(toSecond, 2 * 1000)
}
const toSecond = () => {
divB.appendChild(h1)
setTimeout(toFirst, 10 * 1000)
}
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(문서 객체)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>문서 객체 제거하기</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const h1 = document.querySelector('h1')
h1.parentNode.removeChild(h1) // h1 태그의 부모 객체 body 태그에 접근하여 제거
// document.body.removeChild(h1)
}, 3 * 1000)
})
</script>
</head>
<body>
<hr>
<h1>제거 대상 문서 객체</h1>
<hr>
</body>
</html>
- 이벤트 리스너(핸들러) : 이벤트가 발생할 때 실행하는 함수를 의미
// 이벤트 설정하기
// 문서 객체.addEventListener(이벤트 이름, 콜백 함수)
// 이때 실행할 함수를 '이벤트 리스터' 또는 '이벤트 핸들러' 라고 부른다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이벤트 연결하기</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
let counter = 0
const h1 = document.querySelector('h1')
h1.addEventListener('click', (e) => {
counter++
h1.textContent = `클릭 횟수: ${counter}`
})
})
</script>
</head>
<style>
/* 클릭을 여러 번 했을 때 글자가 선택되는 것을 막기 위한 스타일*/
h1 {
user-select: none;
}
</style>
<body>
<h1>클릭 횟수 : 0</h1>
</body>
</html>
- 이벤트 제거하기
// 문서 객체.removeRventListener(이벤트 이름, 이벤트 리스너)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이벤트 제거하기</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
let counter = 0
let isConnect = false
const h1 = document.querySelector('h1')
const p = document.querySelector('p')
const connectButton = document.querySelector('#connect')
const disconnectButton = document.querySelector('#disconnect')
const listener = (e) => {
h1.textContent = `클릭 횟수: ${counter++}`
}
connectButton.addEventListener('click', () => {
if (isConnect === false) {
h1.addEventListener('click', listener)
p.textContent = '이벤트 연결 상태: 연결'
isConnect = true
}
})
disconnectButton.addEventListener('click', () => {
if (isConnect === true) {
h1.removeEventListener('click', listener)
p.textContent = '이벤트 연결 상태: 해제'
isConnect = false
}
})
})
</script>
</head>
<style>
/* 클릭을 여러 번 했을 때 글자가 선택되는 것을 막기 위한 스타일*/
h1 {
user-select: none;
}
</style>
<body>
<h1>클릭 횟수 : 0</h1>
<button id="connect">이벤트 연결</button>
<button id="disconnect">이벤트 제거</button>
<p>이벤트 연결 상태: 해제</p>
</body>
</html>
============================================================================================
출처 : 혼자 공부하는 자바스크립트
============================================================================================
갈길이 멀다...
주말인데...
지난 월~금 대충한 나의 업보지 뭐...
'내일배움캠프 4기 > [Javascript]혼자 공부하는 자바스크립트' 카테고리의 다른 글
| 08-1. 구문 오류와 예외 (0) | 2022.11.13 |
|---|---|
| 07-2. 이벤트 활용 (1) | 2022.11.12 |
| 06-3. 객체와 배열 고급 (0) | 2022.11.12 |
| 06-2. 객체의 속성과 메소드 사용하기 (0) | 2022.11.05 |
| 06-1. 객체의 기본 (0) | 2022.11.05 |
'내일배움캠프 4기/[Javascript]혼자 공부하는 자바스크립트' Related Articles
more
