문서 객체 조작하기
HTML 의 요소 = 자바스크립트의 문서 객체
즉 HTML 요소(<h1>,<head>)들을 조작한다는 것입니다.
이때 문서객체를 조합해서 만든 형태를 문서객체모델(DOM)이라 합니다.
(DOM객체 라고 많이 쓰임)
DOMContentLoaded 이벤트
문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용하여 웹브라우저가 문서객체를 모두 읽은 다음 실행됩니다.
DOM을 읽는 순서 <!DOCTYPE html> -> <html> -> <head> -> <title> -> <body> 이런식으로 위에서 부터 차례로 읽어드리며 head 부분에서 body에 문서객체를 조작이 불가능함
하지만 DOMContentLoaded를 사용하면 문서 객체를 모두 읽은 다음 실행되어 헤드에 써도 바디에 출력가능
document.addEventListener('DOMContentLoaded',()=> {
//문장
}
<!DOCTYPE html>
<html>
<head>
<title>DOMContentLoaded</title>
<script>
document.addEventListener('DOMContentLoaded',()=>{
const h1= (text)=>`<h1>${text}</h1>`
document.body,innerHTML += h1('DOMContentLoaded 이벤트 발생')
})
</script>
</head>
<body>
</body>
</html>
문서 객체 가져오기
//문서 객체 읽기
document.head // head 부분을 읽어 드림
document.body // body 부분을 읽어 드림
document.title // title 부분을 읽어 드림
//요소 내부의다른 요소들
document.querySelector(선택자) // CSS 선택자를 읽습니다. ,요소 하나만 선택
document.querySelectorAll(선택자) // 모든 요소 선택
| 이름 | 선택자 형태 | 설명 |
| 태그 선택자 | 태그 | 특정 태그를 가진 요소를 추출합니다. |
| 아이디 선택자 | #아이디 | 특정 id를 가진 요소를 추출합니다. |
| 클래스 선택자 | .클래스 | 특정 class를 가진 요소를 추출합니다. |
| 속성 선택자 | [속성=값] | 특정 [속성:값]를 가진 요소를 추출합니다. |
| 후손 선택자 | 선택자_A 선택자_B | 선택자_A 아래에 있는 선택자_B의 요소를 추출합니다. |
<!DOCTYPE html>
<html>
<head>
<title>DOMContentLoaded</title>
<script>
document.addEventListener('DOMContentLoaded',()=>{
const header = document.querySelector('h1') // h1 태그를 선택 -> header
header.textContent = 'HEADERS' // 텍스트와 스타일을 변경함
header.style.color = 'white'
header.style.backgroundColor='black'
header.style.padding='`10px'
})
</script>
</head>
<body>
<h1></h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>DOMContentLoaded</title>
<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>
</body>
</html>
글자 조작하기
| 속성 이름 | 설명 |
| 문서 객체.textContent | 입력된 문자열을 그대로 넣습니다. |
| 문서 객체.innerHTML | 입력된 문자열을 HTML형식으로 넣습니다. |
<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>
텍스트의 경우 <h1> 적용 X , HTML로 들어간 경우 속성 적용됨
글자 조작을 위해선 성능이 좋은 textContent사용!
속성 조작하기
| 메소드 이름 | 설명 |
| 문서객체.setAttribute(속성이름,값) | 특정 속성에 값을 지정합니다. |
| 문서 객체.getAttribute(속성이름) | 특정 속성을 추출합니다. |
<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)
});
})
</script>
</head>
<body>
<img class ="rect">
<img class ="rect">
<img class ="rect">
<img class ="rect">
<img class ="rect">
</body>
스타일 조작하기
| CSS 속성이름 | 자바스크립트 style 속성 이름 |
| background-color | backgroundColor |
| text-align | textAlign |
| font-size | fontSize |
style객체는 다음처럼 조정 가능함
h1.style.backgroundColor -이 형태를 많이 씀
h1.style[`backgroundColor`]
h1.style[`background-color`]
<script>
document.addEventListener('DOMContentLoaded', () => {
const divs = document.querySelectorAll('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>문서 객체 생성하기
document.createElement(문서객체이름) // 문서 객체를 생성하고 싶을때는 이렇게
부모객체.appendChild(자식객체) // 부모 객체 아래 자식 객체를 추가 가능 <script>
document.addEventListener('DOMContentLoaded', () => {
const header = document.createElement('h1') //문서 객체 생성
header.textContent = '문서 객체 동적으로 생성하기'
header.setAttribute('data-custom', '사용자 정의 속성')
header.style.color = 'white'
header.style.backgroundColor = 'black'
document.body.appendChild(header) // h1 태그를 body 태그 아래에 추가하기
})
</script>
본래 body에 <h1> 태그가 없었지만 appendChild를 통해
부모(body) 객체 아래에 자식(header) 객체를 추가하는 것임
문서 객체 이동하기
appendChild는 문서 객체를 이동하는데 쓰일 수 있습니다.
<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, 1000)
}
const toSecond = () => {
divB.appendChild(h1)
setTimeout(toFirst, 10000)
}
toFirst()
})
</script>
</head>
<body>
<div id="first">
<h1>첫 번째 div 태그 내부</h1>
</div>
<hr>
<div id="second">
<h1>두 번째 div 태그 내부</h1>
</div>
</body>
셋타이머에 따라 1초 후 태그가 이동하면서 줄이 바뀜을 확인가능하다.
문서객체 제거하기
부모객체.removeChild(자식 객체)
문서객체.parentNode.removeChild(문서객체) <script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const h1 = document.querySelector('h1')
h1.parentNode.removeChild(h1)
// document.body.removeChild(h1)
}, 3000)
})
</script>
</head>
<body>
<hr>
<h1>제거 대상 문서 객체</h1>
<hr>
</body>
이벤트 설정하기
이벤트가 발생할 떄 실행할 함수 - (마우스 클릭을 하거나 문서가 생성되거나 할때)
문서객체.addEventListener(이벤트 이름, 콜백함수)
이벤트 연결하기
<script>
document.addEventListener('DOMContentLoaded', () => {
let counter = 0
const h1 = document.querySelector('h1')
h1.addEventListener('click', (event) => {
counter++
h1.textContent = `클릭 횟수:${counter}`
})
})
</script>
<style>
h1{
user-select: none;
}
</style>
</head>
<body>
<h1>클릭 횟수: 0</h1>
</body>
이벤트를 제거할때는
문서객체.removeEventListener(이벤트 이름,이벤트 리스터)<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 = (event) => {
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 = '이벤트 연결 상태: 해제'
}
})
})
</script>
<style>
h1{
user-select: none;
}
</style>
</head>
<body>
<h1>클릭 횟수: 0</h1>
<button id="connect">이벤트 연결</button>
<button id="disconnect">이벤트 제거</button>
<p>이벤트 연결 상태: 해제</p>
</body>
이벤트 활용
이벤트 모델
이벤트를 연결하는 방법을 이벤트 모델이라고 합니다.
표준 이벤트 모델 ( 7-1에서 사용함)
document.body.addEventListener('keyup',()=>{
}고전 이벤트 모델
document.body.onkeyup=(event)=>{
}인라인 이벤트 모델
<script>
const listener = (event)=>{
}
</script>
<body onkeyup="listener(event)">
</body>모든 이벤트 리스너들은 첫 번째 매개변수로 이벤트 객체를 받습니다.
키보드 이벤트
| 이벤트 | 설명 |
| keydown | 키가 눌릴때 실행됩니다.(누르고 있을때,입력될때도) |
| keypress | 키가 입력되었을때 실행됩니다. |
| keyup | 키보드에서 키가 떨어질때 실행됩니다. |
<script>
document.addEventListener('DOMContentLoaded', () => {
const textarea = document.querySelector('textarea')
const h1 = document.querySelector('h1')
textarea.addEventListener('keyup', (event) => {
const length = textarea.value.length
h1.textContent = `글자 수: ${length}`
})
})
</script>
</head>
<body>
<h1></h1>
<textarea></textarea>
</body>
keydown일때 -한글자 부족
keypress - 공백이 나올때까지 숫자 안셈
keyup - 누르기 끝날때 까지 안셈
키보드 키 코드 사용하기
| 이벤트 속성 이름 | 설명 |
| code | 입력한 키 |
| keyCode | 입력한 키를 나타내는 숫자 |
| altKey | ALT키를 눌렀는지 |
| ctrlKey | Ctrl키를 눌렀는지 |
| shiftKey | shift키를 눌렀는지 |
<script>
document.addEventListener('DOMContentLoaded', () => {
const h1 = document.querySelector('h1')
const print = (event) => {
let output = ''
output += `alt: ${event.altKey}<br>`
output += `ctrl: ${event.ctrlKey}<br>`
output += `shift: ${event.shiftKey}<br>`
output += `code: ${typeof(event.code) !== 'undefined' ?
event.code : event.keyCode}<br>`
h1.innerHTML = output
}
document.addEventListener('keydown', print)
document.addEventListener('keyup', print)
})
</script>
</head>
<body>
<h1></h1>
</body>
키로 별움직여보기!
<script>
document.addEventListener('DOMContentLoaded', () => {
const star = document.querySelector('h1')
star.style.position = 'absolute'
let [x, y] = [0, 0]
const block = 20
const print = () => {
star.style.left = `${x * block}px`
star.style.top = `${y * block}px`
}
print()
const [left, up, right, down] = [37, 38, 39, 40]
document.body.addEventListener('keydown', (event) => {
switch (event.keyCode) {
case left:
x -= 1
break
case up:
y == 1
break
case right:
x += 1
break
case down:
y += 1
break
}
print()
})
})
</script>
</head>
<body>
<h1>★</h1>
</body>
이벤트 발생객체
지금까지는 이벤트 내부에서 문서객체와 관련된 정보를 추출했지만 코드가 커지는 경우 이벤트 리스너를 외부로 분리하는 경우가 많습니다.
이러한 경우네는 어떻게 객체에 접근할 수 있을까요?
1.event.currentTarget 속성 사용한다.
2.this 키워드를 사용한다
글자입력양식 이벤트
사용자로부터 어떠한 입력을 받을때 사용하는 요소를 입력양식이라 부릅니다.
input태그,textarea태그,button태그,select태그 등
이를 활용한 단위 변환기
<script>
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('input')
const button = document.querySelector('button')
const p = document.querySelector('p')
button.addEventListener('click', () => {
const inch = Number(input.value)
if (isNaN(inch)) {
p.textContent = '숫자를 입력해주세요'
return
}
const cm = inch * 2.54
p.textContent = `${cm} cm`
})
})
</script>
</head>
<body>
<input type="text"> inch<br>
<button>계산</button>
<p></p>
</body>
이메일 형식 확인하기
<script>
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('input')
const p = document.querySelector('p')
const isEmail = (value) => {
return (value.indexOf('@') > 1)
&& (value.split('@')[1].indexOf('.') > 1)
}
input.addEventListener('keyup', (event) => {
const value = event.currentTarget.value
if (isEmail(value)) {
p.style.color = 'green'
p.textContent = `이메일 형식입니다: ${value}`
} else {
p.style.color = 'red'
p.textContent = `이메일 형식이 아닙니다: ${value}`
}
})
})
</script>
</head>
<body>
<input type="text">
<p></p>
</body>
※change이벤트는 글자가 입력될때 발생 X , 입력하고 선택을 해제할때 발생합니다.
정규표현식을 활용하여 유효성 검사를 할 수 있다!
드롭다운 목록 select태그로 구현
<script>
document.addEventListener('DOMContentLoaded', () => {
const select = document.querySelector('select')
const p = document.querySelector('p')
select.addEventListener('change', (event) => {
const options = event.currentTarget.options
const index = event.currentTarget.options.selectedIndex
p.textContent = `선택: ${options[index].textContent}`
})
})
</script>
</head>
<body>
<select>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
<option>튀김</option>
</select>
<p>선택: 떡볶이</p>
</body>
멀티플 select 구현
<script>
document.addEventListener('DOMContentLoaded', () => {
const select = document.querySelector('select')
const p = document.querySelector('p')
select.addEventListener('change', (event) => {
const options = event.currentTarget.options
const list = []
for (const option of options) {
if (option.selected) {
list.push(option.textContent)
}
}
p.textContent = `선택: ${list.join(',')}`
})
})
</script>
</head>
<body>
<select multiple>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
<option>튀김</option>
</select>
<p></p>
</body>
cm를 여러 단위로 변환하는 프로그램
<script>
document.addEventListener('DOMContentLoaded', () => {
let 현재값
let 변환상수 = 10
const select = document.querySelector('select')
const input = document.querySelector('input')
const span = document.querySelector('span')
const calculate = () => {
span.textContent = (현재값 * 변환상수).toFixed(2)
}
select.addEventListener('change', (event) => {
const options = event.currentTarget.options
const index = event.currentTarget.options.selectedIndex
변환상수 = Number(options[index].value)
calculate()
})
input.addEventListener('keyup', (event) => {
현재값 = Number(event.currentTarget.value)
calculate()
})
})
</script>
</head>
<body>
<input type="text"> cm =
<span></span>
<select>
<option value="10">mm</option>
<option value="0.01">m</option>
<option value="0.393701">inch</option>
</select>
</body>
체크박스 활용하기
<script>
document.addEventListener('DOMContentLoaded', () => {
let [timer, timerId] = [0, 0]
const h1 = document.querySelector('h1')
const checkbox = document.querySelector('input')
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
timerId = setInterval(() => {
timer += 1
h1.textContent = `${timer}초`
}, 1000)
} else {
clearInterval(timerId)
}
})
})
</script>
</head>
<body>
<input type="checkbox">
<span>타이머 활성화</span>
<h1></h1>
</body>
라디오 버튼 활용하기
<script>
document.addEventListener('DOMContentLoaded', () => {
const output = document.querySelector('#output')
const radios = document.querySelectorAll('[name=pet]')
radios.forEach((radio) => {
radio.addEventListener('change', (event) => {
const current = event.currentTarget
if (current.checked) {
output.textContent = `좋아하는 애완동물은 ${current.value}이시군요!`
}
})
})
})
</script>
</head>
<body>
<h3># 좋아하는 애완동물을 선택해주세요</h3>
<input type="radio" name="pet" value="강아지">
<span>강아지</span>
<input type="radio" name="pet" value="고양이">
<span>고양이</span>
<input type="radio" name="pet" value="햄스터">
<span>햄스터</span>
<input type="radio" name="pet" value="기타">
<span>기타</span>
<hr>
<h3 id="output"></h3>
</body>
기본이벤트 막기
<script>
document.addEventListener('DOMContentLoaded', () => {
const imgs = document.querySelectorAll('img')
imgs.forEach((img) => {
img.addEventListener('contextmenu', (event) => {
event.preventDefault()
})
})
})
</script>
</head>
<body>
<img src="http://placekitten.com/300/300" alt="">
</body>
마우스 오른쪽 클릭 막아짐
체크때만 링크 활성화하기
<script>
document.addEventListener('DOMContentLoaded', () => {
let status = false
const checkbox = document.querySelector('input')
checkbox.addEventListener('change', (event) => {
status = event.currentTarget.checked
})
const link = document.querySelector('a')
link.addEventListener('click', (event) => {
if (!status) {
event.preventDefault()
}
})
})
</script>
</head>
<body>
<input type="checkbox">
<span>링크 활성화</span>
<br>
<a href="http://hanbit.co.kr">한빛미디어</a>
</body>
체크 박스로 활성화!
TODO LIST 만들어보기
<script>
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('#todo')
const todoList = document.querySelector('#todo-list')
const addButton = document.querySelector('#add-button')
let keyCount = 0
const addTodo = () => {
if (input.value.trim() === '') {
alert('할 일을 입력해주세요.')
return
}
const item = document.createElement('div')
const checkbox = document.createElement('input')
const text = document.createElement('span')
const button = document.createElement('button')
const key = keyCount
keyCount += 1
item.setAttribute('data-key', key)
item.appendChild(checkbox)
item.appendChild(text)
item.appendChild(button)
todoList.appendChild(item)
checkbox.type = 'checkbox'
checkbox.addEventListener('change', (event) => {
item.style.textDecoration
= event.target.checked ? 'line-through' : ''
})
text.textContent = input.value
button.textContent = '제거하기'
button.addEventListener('click', () => {
removeTodo(key)
})
input.value = ''
}
const removeTodo = (key) => {
const item = document.querySelector(`[data-key="${key}"]`)
todoList.removeChild(item)
}
addButton.addEventListener('click', addTodo)
input.addEventListener('keyup', (event) => {
const ENTER = 13
if (event.keyCode === ENTER) {
addTodo()
}
})
})
</script>
<body>
<h1>할 일 목록</h1>
<input id="todo">
<button id="add-button">추가하기</button>
<div id="todo-list">
</div>
</body>
'프로그래밍 공부 > Javascript' 카테고리의 다른 글
| [혼공JS] 클래스 chapter 9 (0) | 2024.01.21 |
|---|---|
| [혼공JS] 예외처리 chapter 8 (0) | 2024.01.21 |
| [혼공JS]객체 chapter 6 (1) | 2024.01.16 |
| [혼공JS] 2주차 미션 (1) | 2024.01.15 |
| [혼공JS] 함수 chapter 5 (1) | 2024.01.15 |
