js. document객체

자바스크립트에서는 document객체를 이용하여 html의 구조를 선택해서 조작하고, 추가할 수 있다.

document는 DOM 트리의 최상위 객체이다.

브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다.

그리고 document 객체를 뿌리로 하는 DOM 트리를 만든다.

 

문서 객체 모델(DOM)이란?

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

> html의 element로 생각하면 된당.

 

document 객체의 역할은 아래와 같다.

- 프로퍼티로 HTML 문서의 전반적 속성을 나타냄

- 메소드로 DOM 객체 검색

- 메소드로 새로운 DOM 객체 생성

- 메소드로 HTML 문서의 전반적 제어 지원

 

DOM을 받아오는 메서드로는

- getElementById( ) : 아이디명으로 DOM객체를 받아온다.

- getElementsByTagName( ) : 특정 태그명을 가진 모든 태그를 받아온다.

- getElementsByClassName( ) : 특정 클래스명을 가진 모든 태그를 받아온다.

- querySelector( ) : css 문법을 이용해서 id나 클래스명을 받아온다. 

ex) document.querySelector("#todoList input")

 

DOM을 추가하는 방법은

- createElement("li") 이런식으로 문서상에 구조를 추가한다.

추가한 요소를 appendChild( ), prependChild( )로 구조의 순서를 정해줄 수 있다.

const list = document.getElementById("foodList");  // html구조안의 ul id="foodList"를 가져옴.

const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = "피자";   // 생성한 span 태그에 "피자"를 넣는다.

li.appendChild(span);  // 생성한 li태그안에 span을 자식요소로 추가
list.appendChild(li);  // 기존에 있던 ul태그에 li를 자식요소로 추가

 

삭제는 간단히 removeChild( ) 😋