< Javascript > DOM 이해하기

초초·2023년 1월 5일
1

💻📚 TIL

목록 보기
13/22

자바스크립트는 웹 문서를 제어하기 위한 프로그래밍 언어다. 그렇다면 자바스크립트는 어떻게 웹 문서의 정보를 가져오고 제어하는 것 일까? 웹 문서의 텍스트나 이미지 등의 요소를 자바스크립트로 제어하기 위해서는 문서 객체 모델에 아는 것이 중요하다

DOM

DOM은 Document Object Model를 줄여말하는 것으로 문서 객체 모델이라고도 한다. 문서 객체 모델은 웹 문서의 html이나 div같은 요소들을 자바스크립트가 사용할 수 있게 객체를 사용해 문서를 해석하는 방법이라고 볼 수 있다.

웹 문서를 열 때 브라우저의 렌더링 엔진이 html로 작성된 코드를 한줄씩 읽어 객체화하여 자바스크립트에서 이 문서 객체에 접근할 수 있게 한다. 즉 스크립트 언어로 웹 문서의 요소를 제어할 수 있게 웹 문서를 객체화하고 이를 이용하는 방식을 문서 객체 모델이라고 생각할 수 있다

DOM 구조


DOM은 하나의 가지에서 갈라져 나가는 나무를 뒤집어 놓은 모습으로 생겼고 이를 DOM tree라고 한다. DOM에서 각각의 요소는 node라고 부른다. DOM구조의 최상위 노드 document는 웹 문서 영역을 제어하는 객체이며, 이 document를 통해 html의 원하는 요소에 접근할 수 있다.

DOM 구조 조회하기

DOM 구조는 console.dir을 사용하여 조회할 수 있다. 콘솔창을 열어 console.dir(document.body)를 치면 body의 자손을 요소를 모두 확인할 수 있다
console.logdocument.body를 조회했을때는 html문서같이 출력되는데 console.dir으로 요소를 조회하면 객체 형식으로 받아볼 수 있음

DOM 다루기

create

  • document.createElement를 통해 html 요소 만들기

const newDiv = document.createElement('div');로 div요소를 하나 만들어 newDiv 변수에 할당해둔다. 이때 만들어진 div요소는 부모, 자식 관계없이 그냥 허공에 떠돌아다니는 요소이다

append

document.부모요소.append(요소)로 html 요소 부모노드에 달아주기

document.body.append(newDiv)로 body 요소에 자식으로 넣어준다 이때 newDivbody의 자식요소 맨 마지막 순서로 들어감

  • insertBefore() - 특정 자식요소 이전에 넣어줌
  • element.removeChild() - 자식요소 삭제
  • element.replaceChild() - 자식요소 교체

등등 여런 매서드를 사용하여 여러 작업을 해줄 수 있다

read

querySelector()로 html 요소를 조회하기

const oneDiv= document.querySelector('.news') 클래스가 .new인 엘리먼트 중 첫번째 엘리먼트를 조회함 여러개의 요소를 한번에 조회하기 위해서는 querySelectorAll을 사용
이렇게 불러온 요소들은 배열처럼 사용할 수 있지만 배열이 아니라 '배열형' 객체임을 기억할 것

update

html 요소 변경하기

  • textContent로 문자열 입력
const newDiv= document.querySelector('div');
newDiv.textContent = 'embargo';     	// <div>dev</div>
  • classList.add로 클래스 추가하기
oneDiv.classList.add('news')			// <div class="news">dev</div>

delete

html 요소 삭제하기

  • remove()로 지우기
const container = document.querySelector('#container')
const newDiv = document.createElement('div')
container.append(newDiv)
newDiv.remove()
  • innerHTML로 지우기 (권장하지 않음)
document.querySelector('#container').innerHTML = '';
  • 반복문과 removeChild로 지우기
//앞에서부터 하나씩 모두 지우기
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

//맨 앞의 자식요소 남기면서 뒤에서부터 하나씩 지우기
const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

//클래스가 news인 것만 찾아서 지우기
const news = document.querySelectorAll('.news')
for (let news of news){
    tweet.remove()
}
profile
잔디 꽉꽉 심쟈 🍀

0개의 댓글