DOM :
Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다.
createElement
document.createElement('div')
//새로운 div 엘리먼트 생성
Append - append, appendChild
const tweetDiv = document.createElement('div')
//변수 tweetDiv에 새로운 div 엘리먼트를 할당
document.body.append(tweetDiv)
//변수 tweetDiv에 담긴 새로운 div 엘리먼트를 body 엘리먼트에 append
READ - querySelector, querySelectorAll
셀렉터로는 HTML 태그("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용
const oneTweet = document.querySelector('.tweet')
//querySelector로 클래스 이름이 tweet인 HTML 엘리먼트 중 첫 번째 엘리먼트 조회
const tweets = document.querySelectorAll('.tweet')
//querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 엘리먼트를 유사 배열(Array-like Object)로 받아오기
const getOneTweet = document.getElementById('container')
//getElementById로 아이디 이름이 container인 HTML 엘리먼트 받아오기
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
//div엘리먼트를 생성하고 container의 마지막 자식 요소로 추가하기
UPDATE - textContent, classList.add
oneDiv.textContent = 'dev';
//textContent를 이용해 문자열을 입력
oneDiv.classList.add('tweet')
//classList.add를 이용해 'tweet' 클래스를 추가
const container = document.querySelector('#container')
container.append(oneDiv)
//append를 이용해 container의 자식 요소에 oneDiv를 추가
setAttribute
-선택한 요소(element)의 속성(attribute) 값을 정하기
element.setAttribute( 'attributename', 'attributevalue' )
ex)
document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' )
//id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다.
DELETE - remove, removeChild
-삭제하려는 엘리먼트의 위치를 알고 있는 경우
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove()
//append 했던 엘리먼트를 삭제
-여러 개의 자식 엘리먼트를 지우는 경우
document.querySelector('#container').innerHTML = '';
//id가 container인 엘리먼트 아래의 모든 엘리먼트를 지웁니다.
-innerHTML은 보안에서 문제를 가지고 있기 때문에 removeChild 사용
-removeChild :
자식 엘리먼트를 지정해서 삭제하는 메소드
모든 자식 엘리먼트를 삭제하기 위해, 반복문(while, for, etc.)을 활용
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개만 남을 때까지, 마지막 자식 엘리먼트를 제거
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
//클래스 이름이 tweet인 엘리먼트만 찾아서 제거