EtoC

DOM 본문

FrontEnd/HTML5

DOM

게리드 2023. 8. 30. 20:44

 

으.. 프론트엔드 과제를하면서 html이나 css는 검색해보면서 하니 금방 할 수 있었다.
하지만 html파일과 js파일을 어떻게 관계시켜야할지 감이 오지 않았다.

HTML과 Javascript를 어떻게 연결할까?

1. HTML에서 Javascript로 연결

  1. 태그를 이용
  2. js파일을 연결해서 이용

2. Javascript에서 HTML로 연결

  1. DOM을 사용하여 javascript로 HTML에 접근하여 조작하기
    자바스크립트에서 html(웹페이지)에 접근하기위해서는 DOM을 사용해야한다.
    DOM을 사용하여 요소를 생성하거나 내용추가,클래스부여,스타일수정등 여러 작업을 할 수 있다.

근데 DOM이 뭔데...?

DOM

DOM은 문서(Document) 객체(Object) 모델(Model)의 약자로, HTML 이나 XML 문서에 접근하기 위한 일종의 인터페이스다.
HTML문서의 계층적인 구조와 정보를 표현하고 제어할 수 있는 tree 형태의 자료구조이다.
트리자료구조는 노드의 계층 구조로 이루어져있다.

  • Document: HTML
  • Object&Modeling: HTML문서를 객체형태로 모델링

이렇게 문서를 객체화하여 HTML에서 원하는 위치에 접근할 수 있다.

트리구조및 이진탐색 글 쓰고 링크 첨부

DOM은 웹페이지의 HTML을 계층화하여 트리구조로 만든 객체 모델이고, javascript는 이 moodel을 사용하여 웹페이지에 접근하여 페이지를 수정할 수 있다. 즉 프로그래밍 언어를 웹페이지에서 사용할 수 있도록 연결해주는 역할을 담당한다.

DOM과 script의 위치

HTML 태그사이에 <script>가 있을경우 두가지 문제점이 있다.

  1. HTML을 읽는 과정에서 스크립트를 만나면 읽기가 중단되고 화면에 표시되는 시간이 지연된다.
  2. DOM트리가 생성되기전에 자바스크립트가 생성되지않은 DOM을 조작할 수도 있다.

때문에 <script>는 태그를 다 읽고 DOM tree가 생선된 후인 <body>의 최하단에 위치하는것이 가장 좋다.

head태그에 사용하는 방법도 있는데 이때는 async/defer속성을 사용해야한다.
defer를 사용하는것이 에러가 발생할 확률이 더 낮다.

DOM에 접근하기 위해 사용하는 메소드들

NodeList의 Method

1. getElementsBy

장점:
단점:

//index 접근 불필요
document.getElementById

document.body.getElementsByClassName('name')

2.QuerySelector

장점:
단점: 동일한 명의 클래스가 있을경우 가장 처음에 일치하는값을 갖고와서 원하는 값이 아닐수 있다.

//indes 접근 불필요
document.querySelect

document.querySelectAll

📝  공부하며

DOM과 Event는 프론트에서만 알아야하는 용어인줄 알았다.(6월 11일의 나)
스터디를 할때 DOM tree라던가 DOM에 접근한다는 말을 많이 들었다.
당시 프론트쪽이 잘 알아야한다고해서 간략하게 어떻게 작동하는지말 공부하고 넘어갔다.
하지만 DOM이 뭔지 모르는 상태로 공부를하니 어딘가 기초적인 부분에서 어긋나는거같은 느낌이들었다.

지하철에서 문서를 읽다가 DOM과 event를 같이 공부해야겠다고 생각했다.
오늘 MDN과 책을읽어보면서 연관된게 굉장히 많다는것을 알았다.
이걸 언제 다 블로그에 적을지..

'FrontEnd/HTML5' Related Articles more