[Javascript] DOM

⊙자바스크립트는 웹 문서를 제어하기 위해 개발된 언어이다.

요소의 콘텐츠를 변경, 다른 요소를 추가, 제거하는 등 html 문서를 조작하는 것

 

⊙HTML파일을 어떻게 제어할 수 있는 걸까??

브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있는데 html파일을 한 줄 한 줄 해석하고 해석이 끝나면 이러한 문서를 객체화하여 자바스크립트로 접근할 수 있게 해 준다.

그래서 '문서를 객체화했다'하여 문서 객체 모델 (Document Object Model)이라 한다.

 

tree구조

⊙이것을 Dom 트리 라고 하고 각각의 요소를 노드라고 한다. 각각의 노드에 접근해서 제어할 수 있다.

웹 문서를 객체화한 것을 돔이라 한다면 브라우저 자체를 제어할 수 있도록 한 것이 브라우저 객체 모델 (Browser Object Model)이라 한다. 

css를 자바스크립트로 조작할 수 있도록 한 것이 css Object Model이라 한다.

Bom (Browser Object Model)에는 웹문서 영역을 제어할 수 있게 하는 객체를 제공 ㅡ> document이며 돔트리의 최상위 노드이다.

document객체로 원하는 html요소에 접근할 수 있다

document객체로  Dom객체에 접근한 다음, Dom객체에서 지원하는 textContent 같은 프로퍼티로 제어를 할 수 있다.

html요소에 접근할 때마다 이렇게 어렵게 접근할 수 없기에 쿼리 셀렉트를 쓴다.

그래서 있는 것이 let domObject = document.querySelector('h1') 이렇게 접근해서

domObject.textContent =  '변경합니다~!'처럼 프로퍼티나 메서드를 통해 html요소를 제어한다.

 

아래는 MDN의 interfaces 내용이다

DOM의 핵심 Interfaces DOM 에서 가장 많이 사용되는 interfaces 를 정리해보았다. 여기에서는 이들 API 가 실제로 어떤 일을 하는지 설명하는 대신 DOM 을 사용하면서 자주 만나게 되는 methods 와 properties 를 보여줄 것이다.  Document 와 window objects 는 DOM 프로그래밍에서 가장 자주 사용하는 objects 이다. 간단하게 설명하자면, window object 는 브라우저와 같다고 할 수 있으며, document object 는 root document 자체라고 할 수 있다. generic Node interface 로부터 상속받은 Element 와 Node, Element interfaces 가 협력하여 각각의 elements 에서 사용할 수 있는 수많은 methods 와 properties 를 제공한다. 이러한 elements 는 이전 섹션에서 설명한 table object 예제에서도 살펴봤듯이, elements 가 보유한 데이터를 처리할 수 있는 특정한 interfaces 도 가지고 있다. 아래는 웹 페이지, XML 페이지 스크립팅에서 DOM 을 사용하는 공통적인 API 들의 간략한 목록이다. document.getElementById(id) document.getElementsByTagName(name) document.createElement(name) parentNode.appendChild(node) element.innerHTML element.style.left element.setAttribute element.getAttribute element.addEventListener

 

 

<참고자료>

https://www.youtube.com/watch?v=aTGhKjoZeao