DOM
DOM은 Document Object Model, HTML 요소를 Object처럼 조작할 수 있는 모델이다.
HTML에 JS적용하기
HTML에 JS를 적용하기 위해서는 <script>태그를 사용한다.
<script src="파일이름.js"></script>이러한 방식으로 HTML 파일과 같은 디렉토리에 존재하는 js파일을 불러올 수 있다.
웹 브라우저는 코드를 해석하며 <script>요소를 만나면 해석을 잠시 멈추고 스크립트 요소를 먼저 실행한다. <script> 요소는 등장과 함께 실행된다
스크립트 요소를 추가할때는 대표적으로 두가지 사례가 있는데 하나는 <head>요소에 추가하는것과 </body>가 끝나기 전에 추가하는 방법이다.
스크립트 요소를 헤드 요소에 추가하게 되면, 웹사이트가 완벽한 형태로 보여진다는 장점이 있으나, JS파일이 크거나 인터넷이 느릴 경우, 웹사이트를 보기까지 시간이 오래걸린다는 단점이 있다. 또한, 문서의 DOM구조가 필요한 스크립트의 경우, document.onload와 같은 로드 이벤트가 추가되지 않으면 에러가 발생하게 된다.
바디요소의 맨 끝에 추가되는 경우, 브라우저가 렌더링이 완료된 상태로 스크립트가 실행되기 때문에 페이지 콘텐츠를 더 빠르게 볼 수 있지만, 완벽하지 않은 상태로 보여진 이후 변화된다는 단점이 있고 웹이 JS에 의존적인 구조라면 HTML이 파싱이 빠르게 완료되어도 큰 의미가 없다.
이런 단점들 때문에 defer을 사용하는데, HTML을 파싱하다가 script 태그를 만나면 파싱하면서 script는 다운로드만 시켜두되, HTML파싱이 완료된 이후에 script를 실행시키는것이다.
DOM 다루기
CREATE
DOM으로 HTML을 조작하는 방법중 가장 기초, 새로운 요소를 만드는 방법이다.
const newDiv = document.createElement('div')
// <div> </div>이렇게 만들어진 div엘리먼트는 아무곳에도 연결되지 않은 상태로, 확인이 불가하다. APPEND를 통해, 트리 구조에 연결해야만 실제 웹 페이지 상에서 확인이 가능해지는 것이다.
APPEND
append 메서드는 생성한 요소를 트리구조에 연결해주기 위해 사용한다, 위에서 사용한 코드에 이어서
document.body.append(newDiv)방식으로 작성해준다면 div요소 안에 내용이 없기 때문에 눈에 보이는 변화가 없을 수 있지만, 크롬 개발자도구의 Elements탭을 보면 body에 연결된 내용이 비어있는 div요소를 확인할 수 있을것이다.
참고로 DOM 구조를 조회할 때에는 console.dir을 사용할 수 있다.
console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력한다.
