TIL 10. DOM

1. DOM (Document Object Model)

1- 1. 개념 및 의의
DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다.
JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.
DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 연결하는 역할을 한다.

https://storage.googleapis.com/replit/images/1554697886215_4cc30fbcee76455dc6061ef47279a2a1.pn

JavaScript는 document라는 전역객체를 통해 HTML에 접근할 수 있다

2. 왜 HTML을 접근해야 할까?

https://storage.googleapis.com/replit/images/1554696792180_4109f19a3b5f31133dd4ecde0659adb5.pn

2-1. Element and Attribute, Content
HTML에 카테고리를 직접 작성하지 않고 API를 통해 서버에서 카테고리 목록의 데이터를 가져오는 것 처럼, document객체는 DOM트리의 root node에 접근하게 해준다.
document객체로 요소(element)에 접근하듯이 요소의 속성(attribute)에도 접근할 수 있다.
그렇게 class, id도 추가하고 style도 수정할 수 있다.
요소의 내용(content)는 innerHTML으로 접근하고 수정할 수 있다.

document.body.innerHTML = '내용 다 바꿈';

위는 body태그 내부에 있는 것을 '내용 다 바꿈'이라는 텍스트로 바꾼 것입니다. body태그내에 엄청나게 많은 요소가 있더라도 innerHTML을 사용하면 내용이 전부 교체됩니다. 특정 element를 접근하고 싶을 때는 어떻게 해야할까요? tag, class, id와 같은 css selector로 접근 가능합니다.

2-2. Style

let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

css에서 사용했던 property 명인 background-color대신 **backgroundColor**으로 접근한다. **JavaScript에서 style 수정할 때 hypen(-)은 사용할 수 없다. ** 객체(Object)에서 프로퍼티 이름에 hypen(-`)을 사용할 수 없던 이유와 같다.

그러므로 style의 프로퍼티에 접근하고 싶을 때 camelCase로 변경한다.

2-3. Create a Element

.createElement (tagName) 함수를 사용하면 요소(element)를 만들 수 있다.
위의 함수는 요소를 만들기만 할 뿐, 아직 HTML의 어디에 들어가야 할지 지정해준 것이 아니다.
따라서 만든 후에는 어딘가의 element에 append시켜줘야 한다.
innerHTML는 내용을 전부 대체 시켰다면 appendChild함수는 요소의 뒤쪽에 붙여준다.

2-4. 예제
const newP= document.createElement("p"); //새로운 <p></p>``를 만든다. newP.className = "class"; //

newP.innerHTML = "DOM"; //

DOM

를 ```태그 안에 위치시키다.
}