안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 javascript 7편입니다.
속성 조작하기
문서 객체의 속성을 조작해볼 차례입니다.
문서객체.setAttribute(속성이름, 값) // 특정 속성에 값을 지정합니다!
문서객체.getAttribute(속성이름) // 특정 속성을 추철합니다!예제를 살펴볼게요.
<!-- 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">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./main.js"></script>
</head>
<body>
<img class="rect">
<img class="rect">
<img class="rect">
<img class="rect">
</body>
</html>document.addEventListener('DOMContentLoaded', () => {
const rects = document.querySelectorAll('.rect')
rect.forEach((rect, index) => {
const width = (index + 1) * 100
const src = `http://placekitten.com/${width}/250`
rect.setAttribute('src', src)
})
})querySelectorAll 메소드를 통해 특정 클래스 요소들을 전부 찾은 후에,
index에 +1을 해줌으로써 1부터 4번 index까지 반복되게 만들었습니다.
문서 객체 생성하기
문서 객체를 읽어들여 활용하는것이 아닌, 생성하고 싶을 땐
document.createElement()메소드를 사용합니다.
하지만, 문서 객체는 만들기만 한다고 배치되진 않아요.
어떤 문서의 아래에 추가할 지 지정이 꼭 필요합니다!
그래서 필요한 메소드가 바로 appendChild()메소드에요.
부모 객체.appendChild(자식 객체)예시를 볼게요.
<!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">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./main.js"></script>
</head>
<body>
</body>
</html>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)
})html내부에는 분명히 h1태그가 없습니다!
하지만 결과를 보면?
h1 태그가 생성되어 삽입되어 있는 모습입니다.
문서 객체 이동하기
appendChild()메소드는 문서 객체를 이동할 때도 사용이 가능합니다.
빠른 예시를 한 번 볼게요.
<!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">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./main.js"></script>
</head>
<body>
<div id="first">
<h1>첫 번째 div 태그 내부입니다!</h1>
</div>
<div id="second">
<h1>두 번째 div 태그 내부입니다!</h1>
</div>
</body>
</html>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, 1000)
}
toFirst()
})첫번째로 id속성이 first인 div태그를 선택하고,
두번째로 id속성이 second인 div태그를 선택합니다.
그리고 appendChild()메소드를 통해 h1 태그를 divA에 추가해 실행시킨 후,
setTimeout 메소드를 통해서 1초 후 '이동하는 h1 태그!'의 내용이 toSecond 함수실행으로 divB h1 다음으로 이동합니다.
이후 1초 후에 다시 divA h1 다음으로 움직이는 왔다갔다 하는 움직임을 보여줍니다.
문서 객체 제거하기
생성, 이동이 있으니 제거도 있겠죠?
부모 객체.removeChild(자식 객체)만약 appendChild()메소드 등으로 부모 객체와 이미 연결이 완료되어 있는 경우, parentNode 속성을 통해 부모 객체에 접근이 가능합니다.
즉, 아래와 같은 코드로 부모 객체를 선택해 제거가 가능하죠.
문서 객체.parentNode.removeChild(문서 객체)그럼 예시를 보겠습니다.
<!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">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./main.js"></script>
</head>
<body>
<hr>
<h1>제거대상</h1>
<hr>
</body>
</html>document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const h1 = document.querySelector('h1')
h1.parentNode.removeChild(h1)
}, 10000)
})querySelector() 메소드를 통해 h1태그에 접근 후,
h1.parentNode.removeChild(h1) 메소드를 통해 h1 태그를 제거하는데요.
그 제거 타이밍은 setTimeout() 메소드를 통해 10초 후에 h1 태그를 제거하는 것으로 설정되어 있습니다.
처음 출력하면 아래와 같은 화면이 나옵니다.
10초 후
말끔하게 제거되었습니다.
이벤트 설정하기
지금까지 계속 등장한 addEvenetListener() 메소드가 나올 차례입니다.
문서 객체.addEventListener(이벤트 이름, 콜백 함수)우리가 계속 써왔던 코드로 예를 들어보죠.
document.addEventListener('DOMContentLoaded', () => {
// 내용들
})document에 DOMContentLoaded 라는 이벤트가 발생했을 때,
매개변수로 지정된 콜백 함수를 실행하라는 코드인데요.
여기서 addEventListener의 역할은
"DOMContentLoaded 라는 이벤트가 발생했을 때"를 기다리고 "콜백함수를 실행"시키는 겁니다.
그리고, 이벤트가 발생할 때 실행할 함수를 event handler라고 불러요.
보통 이벤트는 클릭, 스크롤, 포커싱 등 다양하게 쓰이는데요.
예시에서는 클릭을 살펴보겠습니다.
<!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">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./main.js"></script>
</head>
<body>
<hr>
<h1>클릭 횟수</h1>
<hr>
</body>
</html>h1 {
user-select: none;
}document.addEventListener('DOMContentLoaded', () => {
let counter = 0
const h1 = document.querySelector('h1')
h1.addEventListener('click', (event) => {
counter++
h1.textContent = `클릭 횟수: ${counter}`
})
})클릭할때마다 카운트가 올라가는 구조인데요.
아래 html의 h1의 클릭 횟수 숫자가 바뀝니다.
이벤트를 제거할 때는 아래의 코드를 사용합니다.
문서 객체.removeEventListner(이벤트 이름, 이벤트 리스너)이벤트 리스너 부분엔 연결할 때 사용했던 이벤트 리스너를 삽입합니다.
예시를 볼게요.
<!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">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./main.js"></script>
</head>
<body>
<hr>
<h1>클릭 횟수: 0</h1>
<button id="connect">이벤트 연결</button>
<button id="disconnect">이벤트 해제</button>
<p>이벤트 연결 상태: 해제</p>
<hr>
</body>
</html>h1 {
user-select: none;
}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 = '이벤트 연결 상태: 해제'
isConnect = false
}
})
})처음 코드를 실행한 화면은
이벤트 해제 상태로 시작을 합니다.
연결 버튼을 누르면?
이벤트 연결 후 클릭을 하면, 그 때부터 정상적으로 카운트가 시작됩니다!
