가수면
문서 객체 모델 (DOM) (1) - 문서 객체 조작하기 본문
DOM이란?
문서 객체 모델
Document Object Model
자바스크립트를 활용을 해서 html 요소를 조작할 수 있게 하는 방법.
그리고 방법들을 모아둔 객체들의 집합.
body 태그 밖에서도 문서 객체를 조작할 수 있게 해주는 방법
<!DOCTYPE html>
<html>
<head>
<title>DOMContentLoaded</title>
# A를 추가하는 시점에는 아직 <body>가 생성되지 않았기에 body 태그를 조작할 수 없다!!
<script>document.body.innerHTML += '<h1>A</h1>'</script>
</head>
<body>
<script>document.body.innerHTML += '<h1>B</h1>'</script>
<h1>안녕하세요!</h1>
<script>document.body.innerHTML += '<h1>C</h1>'</script>
</body>
</html>
위와 같이 코드를 짜면 아래와 같은 결과가 나온다.
그렇다면 A를 뽑아내려면 어떻게 해야할까?
세가지 방법이 있다.
아래처럼 head 태그 안다가 이벤트 리스너 DOMContentLoaded를 만들어 준다.
<script>
document.addEventListener('DOMContentLoaded', () => {
# 아래처럼 상수로 입력해도 됨.
# const h1 = document.querySelector('h1')
# h1.style.color = 'red'
# 태그 선택자
document.querySelector('h1').style.color = 'red'
# 아이디 선택자
document.querySelector('#header').style.backgroundClolor = 'orange'
# 클래스 선택자 (여러개 클래스 동시 지정 가능. 띄어쓰기X)
document.querySelector('.center.head').style.textAlign = 'center'
# 속성 선택자 #둘 다 가능
document.querySelector('input'/'[type = text]').style.borderRadius = '10px'
# 후손 선택자 #body안에 있는 input
document.querySelector('body input').style.backgroundClolor = 'blue'
})
</script>
</head>
<body>
<h1 id = 'header' class = 'center head'>안녕하세요!</h1>
<input type='text'>
</body>document.querySelector (선택자)
해당하는 것이 여러개 있는 경우에 조건에 맞는 첫번째만 추출
document.querySelectorAll
태그 여러 개 지정 가능
textContent vs innerHTML
<script>
document.addEventListener('DOMContentLoaded', () => {
const a = document.querySelector('#a')
const b = document.querySelector('#b')
a.textContent = 'textContent <br>속성'
b.innerHTML = 'innerHTML <br>속성'
})
</script>
.
.
.
일반적으로 textContent를 더 많이 씀
속성 조작하기
표준에 없는 속성을 지정
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
document.addEventListener('DOMContentLoaded', () => {
# 조작!
const rects = document.querySelectorAll('.rect')
# 값을 넣는 행위
img.setAttribute('src', 'http://placekitten.com/200/200')
# 값을 추출 행위
console.log(img.getAttribute('src'))
})
</script>
</head>
<body>
<img src="" alt="">
</body>
</html>표준에 있는 속성같은 경우
<script>
document.addEventListener('DOMContentLoaded', () => {
# 조작!
const rects = document.querySelectorAll('.rect')
# 값을 넣는 행위
img.src = 'http://placekitten.com/200/200')
# 값을 추출 행위
console.log(img.src)
})
</script>
스타일 조작하기
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const divs = document.querySelectorAll('div')
divs.forEach((v, i) => {
v.style.backgroundColor = `rgba(${i * 25.5}, ${i * 25.5}, ${i * 25.5})`
v.style.height = `10px`
})
})
</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>
</body>
</html>
문서 객체 생성 , 삭제
document.createElement(문서 객체 이름)
document.body.appendChild(변수명) - 붙이기
<script>
document.addEventListener('DOMContentLoaded', () => {
# 문서 객체 생성하기
const header = document.createElement('h1')
# 생성한 태그 조작하기
header.textContent = '안녕하세요'
header.style.color = 'red'
# h1 태그를 body 태그 아래에 추가하기
document.body.appendChild(header)
# h1 태그를 body 태그 제거하기 (아래 거를 더 많이 씀)
body.removeChild(header)
header.parentNode.removeChoild(header)
})
</script>
문서 객체 이동하기
<script>
document.addEventListener('DOMContentLoaded', () => {
# 문서 객체 읽어들이고 생성하기
const header = document.createElement('h1')
header.textContent = '안녕하세요'
# div들을 지정
const A = document.querySelector('#first')
const B = document.querySelector('#second')
# 서로 번갈아가면서 실행하는 함수를 구현합니다.
const toFirst = () => {
A.appendChild(header)
setTimeout(toSecond, 1000)
}
const toSecond = () => {
B.appendChild(header)
setTimeout(toFirst, 10000)
}
toFirst()
})
</script>
이벤트 연결하기
클릭 횟수 증가
<body>
<script>
let counter = 0
const listener = () => {
header.textContent = `클릭 횟수: ${++counter}`
}
const header = document.createElement('h1')
header.style.userSelect = 'none'
header.textContent = `클릭 횟수: 0`
const p = document.createElement('p')
p.style.userSelect = 'none'
p.textContent = `이벤트 연결 상태: 해제`
const connectButton = document.createElement('button')
connectButton.textContent = '이벤트 연결 버튼'
connectButton.addEventListener('click', () => {
header.addEventListener('click', listener)
p.textContent = '이벤트 연결 상태: 연결'
})
const disconnectButton = document.createElement('button')
disconnectButton.textContent = '이벤트 해제 버튼'
disconnectButton.addEventListener('click', () => {
header.removeEventListener('click', listener)
p.textContent = '이벤트 연결 상태: 해제'
})
document.body.appendChild(header)
document.body.appendChild(connectButton)
document.body.appendChild(disconnectButton)
document.body.appendChild(p)
</script>
</body>
'웹 개발 > 웹 개발' 카테고리의 다른 글
| HTML (0) | 2023.03.31 |
|---|---|
| HTML 특수문자 (0) | 2023.03.21 |
| 콘솔 찍어보는 위치 (0) | 2022.11.23 |
| 함수 return 정리 (0) | 2022.11.23 |
| parseInt() vs Number() // String() vs toString() (0) | 2022.11.22 |
Comments