DOM (Document Object Model) : DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미. 조금 좁은 의미로 본다면 document object와 관련된 object의 집합을 의미. 웹 브라우저 화면에 보이는 element를 조작하기 위한 기능으로 가득 차있는 각각의 라이브러리.

JavaScript - DOM

DOM이 생성되는 방식은 두 가지로 나누어 볼 수 있습니다. 우선 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것입니다. 이런 과정을 정적으로 문서 객체를 생성한다고 말합니다. 단순히 적혀져 있는 그대로 DOM가 생성되는 것을 표현한 것입니다.

반대로 원래 HTML 페이지에 없던 DOM을 JavaScript를 이용해서 생성할 수 있습니다. 이런 과정을 동적으로 DOM을 생성한다고 합니다. 따라서 JavaScript로 DOM을 생성한다는 것은 처음에는 HTML 페이지에 없던 DOM을 동적으로 생성하는 것이 됩니다.

DOM 접근 방법

CSS 선택자를 이용하여 DOM을 조작 가능.

• 단일 element Object 선택 ```javascript

• CSS ID 선택 document.getElementById(‘id’); = documetn.queryselectorAll(‘id’);

• 첫번째 element(button) 선택 document.querySelector(‘button’); ```

• 다수 elements Object선택 ```javascript

• 같은 classname을 가진 모든 elements 선택 document.getElementByClassName(‘classname’); = document.querySelectorAll(‘.classname’);

• 같은 tagname을 가진 모든 elements 선택 document.getElementByTagName(‘p’); ```