DOM (Document Object Model)이란?
문서 객체 모델의 약자인 DOM은 웹페이지에서 중요한 역할을 한다. DOM 은 HTML, XML 등 문서의 프로그래밍 인터페이스이다. 즉, 프로그래밍 언어를 통해 html 문서 등에 접근할 수 있도록 한다.
이러한 DOM의 역할 덕분에 프로그래밍 언어에서도 웹 페이지의 요소나 스타일 등을 추가하거나 수정하는 등 다양한 작업을 진행할 수 있다. 문서를 하나의 구조화된 형식으로 표현하기 때문에 이 구조를 통해서 원하는 동작을 할 수 있는 것이다.
특히 DOM은 객체(object)로 표현하게 된다. 이 객체란 자바스크립트에서 사용되는 데이터구조 중 하나이다. 파이썬의 dictionary가 자바스크립트의 객체, object의 역할을 한다. 즉, DOM을 통해서 웹을 프로그래밍 언어에서 사용할 수 있는 데이터 구조 형태로 작업을 수행할 수 있기 때문에 크롤링 등 웹 페이지와 작업할 때 DOM에 대해 잘 이해하는 것이 필요하다.
DOM methods
DOM을 가장 손쉽게 사용할 수 있는 방법 중 하나는 웹 브라우저에서 개발자 도구를 열어(마우스 우클릭을 하거나 f12버튼을 누르면 된다.) 콘솔창으로 들어가 자바스크립트를 통해 사용하는 것이다.
예를 들어서 살펴보자
document.querySelectorAll('p')위 코드에서 'p'태그가 존재한다는 가정하고 이를 실행하게 되면 NodeList라는 'p'태그를 사용하는 요소들을 담은 유사배열이라는 것을 받게 된다. 이처럼 html이나 xml 등 웹페이지의 문서 형식을 프로그래밍 언어에서도 사용할 수 있는 큰 장점이 있다.
이와 비슷하게 DOM에는 다양한 기능들이 존재한다. 몇 가지를 나열해보자.
getElementsbyTagName: 태그 이름으로 문서의 요소들을 리턴한다.getElementsById:Id가 일치하는 요소들을 리턴한다.getElementsByClassName:class가 일치하는 요소들을 리턴한다.quyerySelector: 셀렉터(들)과 일치하는 모든 요소들을 리턴한다.querySelectorAll: 셀렉터(들)과 일치하는 모든 요소들을 리턴한다.
이러한 대표적인 메소드들만 사용해도 원하는 정보는 대부분 얻을 수 있다.
셀렉터에 대한 부분은 CSS를 참고하는 것이 좋다.
DOM과 크롤링
크롤링을 할 때에도 DOM의 개념은 중요하다.
예를 들어 파이썬에서 크롤링을 했을 때 웹 페이지를 텍스트, 즉 문자열로 읽게 되면하나의 거대한 문자열로 웹 페이지를 인식하게 되기 때문에 텍스트를 해석하고 원하는 정보를 찾을 때에 구별하기가 쉽지 않다.
거대한 텍스트를 해석하고 원하는 정보를 찾기 위해 웹페이지를 텍스트 형식으로 사용하지 않고 DOM을 활용한다.
DOM 예시
DOM이 될 간단한 예시를 통해 이해해보자.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>h1 태그입니다. </h1>
<p> p 태그입니다. </p>
</body>
</html>위의 간단한 html이 있다, 여기에서 h1태그의 내용을 알고 싶다면 어떻게 해야할까?
위의 html이 모두 문자열이었다면 태그를 구분할 수 있는 방법이 있는 지, 있다면 어떻게 구분할 수 있을 지 생각해볼 수 있다. 그 후 태그 내부에 있는 정보를 받아서 사용할 수 있다. 이러한 작업도 그 양이 많아지면 비효율적일 것이다. 이 때 DOM 메소드를 활용하여 보다 효율적으로 작업을 완료할 수 있다.
