📝오늘 배운 것
DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경해보았다.
- createElement - CREATE
- querySelector, querySelectorAll - READ
- textContent, id, classList, setAttribute - UPDATE
- remove, removeChild, innerHTML = "" , textContent = "" - DELETE
- appendChild - APPEND
- innerHTML과 textContent의 차이
세부 내용
<!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>아래 사항을 진행하며 DOM을 JavaScript로 조작해보았다
document.createElement('div'); // 1. createElement 메소드를 사용하여 div 엘리먼트 생성
const tweetDiv = document.createElement('div'); //2. 변수 선언 및 할당(but 트리구조엔 진입하지 못한 상태)
document.body.append(tweetDiv); // 3. append메소드를 사용하여 body에 넣음
const container = document.querySelector('#container'); //4. 클래스 이름이 'container'인 HTML 엘리먼트 중 '첫 번째' 엘리먼트를 조회하여 변수에 'container'에 할당
container.append(tweetDiv); //5. tweetDiv를 container의 마지막 자식 요소로 추가한다.
tweetDiv.textContent = 'dev'; //6. 비어있는 div 엘리먼트에 textContent메소드를 사용하여 문자열을 입력한다.
tweetDiv.classList.add('tweet'); // 7.CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가
tweetDiv.remove(); //8. remove메소드로 해당 앨리먼트 삭제
추가로 공부한 내용
1. appendChild와 append의 차이
-
여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용한다. 이렇게 조회한 HTML 엘리먼트들은 배열처럼 for문을 사용하실 수 있다. 다만!!! 앞서 조회한 HTML 엘리먼트들은 배열이 아니다! 이런 '배열 아닌 배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 부릅니다. 정식 명칭은 Array-like Object 입니다.
-
class와 id 말고는 다른 attribute를 추가할 수는 없나?
setAttribute 메소드 사용할 수 있음.
-
textContent와 innerHTML의 차이 (difference between textContent and innerHTML)
-
엘리먼트 삭제
document.querySelector('#container').innerHTML = '';
//id가 container인 엘리먼트 아래의 모든 엘리먼트를 지움
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
} //자식 엘리먼트가 남아있지 않을 때까지, 첫 번째 자식 엘리먼트를 삭제하는 코드
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
//container의 자식 엘리먼트가 1개만 남을 때까지, 마지막 자식 엘리먼트를 제거
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
//클래스 이름이 tweet인 엘리먼트만 찾아서 제거
-
element와 node의 차이
-
children과 childNodes의 차이
-
removeChild와 remove의 차이
-
tweets에 forEach는 되는데, reduce는 안되는 이유
-
tweets를 유사 배열에서 배열로 바꾸는 방법
우당탕탕 개발일기📝🤖