DOM으로 HTML 조작하기
CRUD(Create, Read, Update and Delete)
이번 포스팅의 HTML 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="container">
<h2>Tweet List</h2>
<div class="tweet">hello</div>
<div class="tweet">world</div>
<div class="tweet">code</div>
<div class="tweet">states</div>
</div>
</body>
<!-- <script src="script.js"></script> 주석 처리 -->
</html>HTML element 만들기 (CREATE)
createElement
document.createElement('div')
div element를 새로운 변수 tweetDiv 에 할당
const tweetDiv = document.createElement('div')
생성한 div 는 아직 아무 곳에도 연결이 되어있지 않아
화면에 변화가 없다
HTML element 추가 (APPEND)
append
tweetDiv 를 body 에 추가
document.body.append(tweetDiv)
보이지는 않지만 개발자 도구 Elements 탭에서 확인 가능
HTML element 찾기 (READ)
querySelector
클래스 이름이 tweet 인 element 중 첫 번째 것만 조회
const oneTweet = document.querySelector('.tweet')
querySelectorAll
클래스 이름이 tweet 인 element 모두 조회
const tweets = document.querySelectorAll('.tweet')
tweets : NodeList ≠ Array
= Array-like Object, '배열 아닌 배열', 유사 배열, 배열형 객체
참고) get으로 시작하는 메소드 getElementById 등
예전 방식, 구형 브라우저와 호환성을 고려할 때
#container의 맨 마지막 자식 엘리먼트로 tweetDiv를 추가
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
개발자 도구 Elements 탭에서 확인
HTML element 갱신 (UPDATE)
≈ 추가
textContent
div 에 문자열을 입력
(새로 고침 후)
const oneDiv = document.createElement('div')
console.log(oneDiv)
oneDiv.textContent = 'dev'
console.log(oneDiv)
classList.add
class 추가
oneDiv.classList.add('tweet')
console.log(oneDiv)
container의 자식 요소로 추가 : append
const container = document.querySelector('#container')
container.append(oneDiv)
HTML element 삭제 (DELETE)
remove
삭제할 element를 알고 있을 때
(위에서 이어짐)
oneDiv.remove()
모든 자식 element를 지우려면?
innerHTML(보안 문제)
document.querySelector('#container').innerHTML = '';HTML을 직접 수정해버리면
해커가 위험한 스크립트를 넣어버려서
사용자의 정보를 빼낼 수 있게 된다
= XSS 공격, Cross-Site Scripting
removeChild
자식 엘리먼트를 지정해서 삭제
= 모든 자식 엘리먼트를 삭제하기 위해 반복문을 활용
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
항상배우기