const tweet = document.createElement('div')
document.body.append(tweet)
DOM으로 HTML엘리먼트 정보를 조회하기 위해서는 첫번째 인자로 셀렉터를 전달해 확인할 수 있다.
셀렉터로 HTML태그("div")/id("#tweetList")/class(.tweet)가 가장 많이 사용된다.
여러개의 엘리먼트를 한번에 가져올 때는 querySelectorAll
을 사용한다.
const tweets = document.querySelectorAll('.tweet')
textContent 메서드를 이용해서 빈 태그속에 문자열을 입력할 수 있다.
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
classList를 이용해서 클래스를 추가해 줄 수 있다.
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
setAttribute를 통해 속성값을 줄 수 있다.
<button>Hello World</button>
이렇게 존재할 때
let b = document.querySelector("button");
b.setAttribute("name", "helloButton");
콘솔을 쳐보면
<button name = "helloButton">Hello World</button>
삭제하려는 엘리먼트의 위치를 알 경우, remove 메소드를 이용할 수 있다.
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove()
여러 자식 엘리먼트를 지우고 싶을 때 innerHTML
을 사용하면 편리하다.
document.querySelector('#container').innerHTML = '';
하지만 보안 문제를 겪게 될 수 있기때문에 반복문을 이용해서 삭제해 주는 방법이 더 좋다.
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}