(2023. 01. 05) Section1, DOM 객체

DOM은 HTML 요소를 JS에서 조작하기 위해 사용하는 Model입니다.
DOM 객체를 이용한 js 파일은 </body>태그 바로 위에 써줘야 렌더링이 끝나고 정상적으로 HTML 요소들이 잡힙니다.

만약 DOM 구조를 조회하고 싶다면 console.dir 키워드를 이용하자. DOM을 객체 모습으로 출력해준다.

DOM객체 CRUD

CREATE

const container = document.querySelector('#container');
const newDiv = document.createElement('div');
container.append(newDiv); // container 내부의 마지막에 newDiv 추가하기

READ

const button = document.querySelector('.newButton'); // 쿼리 셀렉터로 요소 선택하기
const buttons = document.querySelectorAll('.newButton'); // 클래스 이름이 newButton인 모든 HTML 요소를 유사 배열로 받아온다.

UPDATE

newDiv.textContent = 'dev'; // 
newDiv.classList.add('newClass'); // 클래스 추가하기
newDiv.setAttribute("추가할 속성이름", "속성값"); // 원하는 속성 추가하기

DELETE

.innerHTML = '';으로 지우는 방법은 보안에서 몇 가지 문제가 있다. 그러므로 권장하지 않는다.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.lastChild);
} // id가 container인 요소 아래의 모든 요소를 지워버리기