// 생성
const tweetDiv = document.createElement('div')
// 생성한 div 가 body 의 젤 마지막 element 로 붙음
document.body.append(tweetDiv)
DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있습니다. 셀렉터로는 HTML 태그("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용됩니다.
querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.
const oneTweet = document.querySelector('.tweet')
querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.
const oneTweet = document.querySelector('.tweet')
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true
[코드] getElementById와 querySelector로 각각 받아 온 container 요소는 하나의 요소입니다.
getElementById 는 구식이다고 한다... 난 거의 이걸로 써왔는디 허허. 어쨌든 결과는 동일하다
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
[코드] tweetDiv를 container의 마지막 자식 요소로 추가합니다.
다음은 뭘해야 할까?
내가 원하는 위치에 div 를 추가하는 것까지 성공하였다. 이제 해당 div 에 클래스를 추가해보자.
oneDiv.classList.add('tweet')
여기까지 정리해보자.
1. 생성: const oneDiv = document.createElement('div');
2. 내용생성: oneDiv.textContent = '손흥민';
3. 클래스추가: oneDiv.classList.add('tweet');
4. 붙일위치: const c = document.querySelector('#container');
5. 추가: c.append(oneDiv);
class와 id 말고는 다른 attribute를 추가할 수는 없나요?
=> MDN에서 setAttribute 라는 메소드를 검색해보세요.
아니 id 는 어떻게 추가하지?
그냥 oneDiv.id = ''; 하면 된다
삭제 방법은
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.
겁나 여러개 많이 삭제하고 싶다?
document.querySelector('#container').innerHTML = '';
[코드] id가 container인 엘리먼트 아래의 모든 엘리먼트를 지웁니다.
무식하네..
사실 HTML은 그냥 string이라 위 innerHTML 방식이 이해가 되긴 한다.
그리고 내가 innerHTML 을 아주 사랑해 왔긴 하다.
그런데 innerHTML 은 몇가지 보안에 문제가 있다고 한다. 그래서 대신 removeChild 함수를 활용하여 똑같은 로직을 구현할 수 있다. 아래 예시는 위 코드와 결과가 완전히 동일하다
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
[코드] container의 첫 번째 자식 엘리먼트가 존재하면, 첫 번째 자식 엘리먼트를 제거합니다.
아래는 class 가 tweet 인 애들을 모두 찾아서 지우는 방법이다. 일단 코드가 다 이해는 안되지만 외워두자. 매우 유용한 문법으로 보인다.
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
[코드] 클래스 이름이 tweet인 엘리먼트만 찾아서 제거합니다.
