Dom을 알아야 하는 이유
•
자바스크립트를 이용해 html에서 데이터를 가져오고 싶다면?
•
웹페이지에 보여지는 데이터를 변경하고 싶다면?
•
인터렉티브한 웹 어플리케이션을 만들고 싶다면?
단순히 정보를 보여주는 웹 페이지가 아닌, 동적인 기능이 있는 웹어플리케이션을 만들고 싶다면, 문서를 조작할 수 있게 해주는 DOM을 알아야 합니다.
DOM : Document Object Model
문서 객체 모델(DOM)은 HTML, XML문서의 프로그래밍 interface 입니다.
문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조 및 스타일, 내용 등을 변경할 수 있게 도와줍니다.
즉, Javascript라는 프로그래밍 언어를 통해 HTML이나 XML이라는 문서에 접근할 수 있게 해주고 내용을 변경할 수 있게 해주는게 DOM입니다.
DOM의 사용 예
위 사진은 MAV라는 사이트의 로그인페이지입니다. 로그인을 하기 위해 아이디와 암호를 입력 후 로그인 버튼을 누른다고 할 때 어떻게 저기서 입력한 ID와 PASSWORD를 추출하여 서버에 전달할 수 있을까요? DOM이 없다면 위 웹페이지(html)의 모든 문자열에서 해당 키워드를 가져오려면, 모든 단어 구문을 해석, 파싱하여 찾아야하는 번거로운 작업이 필요합니다.
그렇기 때문에, DOM(Document Object Model) 이 제공하는 API를 이용해서 검색어에 해당하는 문자열을 보다 쉽게 가져올 수 있습니다
DOM API 사용하기
<input id="username" class="username-input-cont">
JavaScript
복사
위와같은 input 태그가 있다고 할 경우 DOM API에서 해당 input 요소를 가져오는 메서드가 몇가지 있습니다.
단 건 조회: getElement, querySelector
복수 조회 : getElements, querySelectorAll
DOM 객체를 찾는 키워드는 아래와 같이 4 가지가 있습니다.
•
tag
document.getElementsByTagName('input')
JavaScript
복사
•
id
document.getElementById('username')
JavaScript
복사
•
class
document.getElementsByClassName('username-input-cont')
JavaScript
복사
•
cssSelector
◦
일치하는 첫 번째 엘리먼트
document.querySelector('.username-input-cont')
JavaScript
복사
◦
일치하는 모든 엘리먼트
document.querySelectorAll('.username-input-cont')
JavaScript
복사
정리
DOM은 HTML을 위한 API면서 HTML을 탐색할 수 있고 HTML의 구조를 바꿀 수도 있습니다.
