Dom을 알아야 하는 이유

• 자바스크립트를 이용해 html에서 데이터를 가져오고 싶다면?
• 웹페이지에 보여지는 데이터를 변경하고 싶다면?
• 인터렉티브한 웹 어플리케이션을 만들고 싶다면?

단순히 정보를 보여주는 웹 페이지가 아닌, 동적인 기능이 있는 웹어플리케이션을 만들고 싶다면, 문서를 조작할 수 있게 해주는 DOM을 알아야 합니다.

DOM : Document Object Model

<aside> 💡 문서 객체 모델(DOM)은 HTML, XML문서의 프로그래밍 interface 입니다. 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조 및 스타일, 내용 등을 변경할 수 있게 도와줍니다.

</aside>

즉, Javascript라는 프로그래밍 언어를 통해 HTML이나 XML이라는 문서에 접근할 수 있게 해주고 내용을 변경할 수 있게 해주는게 DOM입니다.

DOM의 사용 예

위 사진은 MAV라는 사이트의 로그인페이지입니다. 로그인을 하기 위해 아이디와 암호를 입력 후 로그인 버튼을 누른다고 할 때 어떻게 저기서 입력한 ID와 PASSWORD를 추출하여 서버에 전달할 수 있을까요? DOM이 없다면 위 웹페이지(html)의 모든 문자열에서 해당 키워드를 가져오려면, 모든 단어 구문을 해석, 파싱하여 찾아야하는 번거로운 작업이 필요합니다.

그렇기 때문에, DOM(Document Object Model) 이 제공하는 API를 이용해서 검색어에 해당하는 문자열을 보다 쉽게 가져올 수 있습니다

DOM API 사용하기

<input id="username" class="username-input-cont">