DOM

📝 [Section1_Unit10] DOM

📌 CRUD

모든 언어에 있어 기본이 되는 CRUD에 DOM은 추가로 html에 적용(append)시키는 메서드가 따로 있다.

✔️ CREATE (생성하기)

const tweetDiv = document.createElement('div') // tweetDiv에 'div' 할당

✔️ APPEND (적용하기)

document.body.append(tweetDiv) // 'div'가 할당된 tweetDiv를 'body'에 연결

✔️ READ (읽기)

• querySelector의 첫번째 인자로 html태그, id, class등의 셀렉터를 이용한다.

const oneTweet = document.querySelector('.tweet') // tweet 클래스의 첫번째 요소를 oneTweet에 할당

• querySelectorAll로 여러 인자를 한번에 유사 배열로 가져온다.

const tweets = document.querySelectorAll('.tweet') // tweet 클래스에 있는 요소들을 전부 tweets에 할당

✔️ UPDATE (변경하기)

• textContent : content를 추가하거나 바꿔준다.

const oneDiv = document.createElement('div'); // 비어있는 'div' 생성
oneDiv.textContent = 'hello'; // 'div'에 content로 [hello] 넣기
console.log(oneDiv); // <div>hello</div>

• classList : 클래스 속성을 추가해준다.

oneDiv.classList.add('tweet'); // 'oneDiv'에 tweet 클래스 속성 추가
console.log(oneDiv); // <div class="tweet">hello</div>

• append : 자식 요소로 추가해준다.

const container = document.querySelector('#container'); // 'container'에 'container'라는 id 추가
container.append(oneDiv); // 'container'에 'oneDiv'를 추가

✔️ DELETE (삭제하기)

• remove : 요소를 삭제해준다.

oneDiv.remove() // append했던 'oneDiv' 삭제

• removeChild : 자식 요소를 지정해 삭제할 수 있다. 모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있다.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
} // container의 첫번째 자식 요소가 존재하지 않을 때 까지 삭제