DOM (Document Object Model)

DOM (Document Object Model)

1- 1. 개념 및 의의 DOM(돔)이란 HTML·XML 문서를 구조화한 객체 표현이자, 프로그래밍 언어가 문서에 접근하고 조작할 수 있게 해주는 프로그래밍 인터페이스다. 흔히 트리 구조로 그리지만 마크업 텍스트와 1:1로 대응하는 것은 아니며, 브라우저가 파싱하면서 누락·오류를 보정(예: 빠진 태그 삽입)하는 정규화를 거쳐 생성된다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 연결하는 역할을 한다.

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

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

---

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

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

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로 접근 **가능합니다.

⚠️ innerHTML에 사용자 입력처럼 신뢰할 수 없는 문자열을 그대로 대입하면 스크립트가 삽입되어 XSS 공격에 노출될 수 있다. 단순 텍스트만 넣을 때는 textContent를 사용하는 것이 안전하다.

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

document.body.appendChild(newP); //를`````` `태그 안에 위치시키다. }