HTML에 자바스크립트 적용하기
HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용한다.
<script src="myScriptFile.js"></script>웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다. HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행합니다. <script> 요소는 등장과 함께 실행된다는 사실을 꼭 기억하자!
1. <head> 안쪽에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
</body>
</html>2. <body> 태그가 끝나기 전에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</body>
</html>엘리먼트 찾기
DOM 구조를 조회할 때에는 console.dir 이 유용하다. console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력한다.
DOM으로 HTML 조작하기
CREATE - createElement
document.createElement('div')APPEND - append, appendChild
document.body.append(tweetDiv)변수 tweetDiv에 담긴 새로운 div 엘리먼트를 body 엘리먼트에 append한다.
READ - querySelector, querySelectorAll
const oneTweet = document.querySelector('.tweet')querySelector로 클래스 이름이 tweet인 HTML 엘리먼트를 조회
const tweets = document.querySelectorAll('.tweet')querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 엘리먼트를 유사 배열로 받아온다
UPDATE - textContent, classList.add
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>textContent를 이용해 문자열을 입력한다.
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>classList.add를 이용해 'tweet' 클래스를 추가한다.
const container = document.querySelector('#container')
container.append(oneDiv)append를 이용해 container의 자식 요소에 oneDiv를 추가한다.
DELETE - remove, removeChild
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.id가 container인 엘리먼트 아래에 tweetDiv를 추가하고, remove로 삭제한다.
document.querySelector('#container').innerHTML = '';id가 container인 엘리먼트 아래의 모든 엘리먼트를 지운다.
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}container의 첫 번째 자식 엘리먼트가 존재하면, 첫 번째 자식 엘리먼트를 제거한다.
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}container의 자식 엘리먼트가 1개만 남을 때까지, 마지막 자식 엘리먼트를 제거한다.
또는 직접 클래스 이름이 tweet인 엘리먼트만 찾아서 지우는 방법도 있다.
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}클래스 이름이 tweet인 엘리먼트만 찾아서 제거한다.
