본문 바로가기
데이터 엔지니어링(DE)/파이썬 활용

DOM( Document Object Model )

by kiimy 2021. 7. 21.
728x90
728x90

DOM 은 웹 페이지에서 매우 중요한 역할을 하고 문서 객체 모델

- 프로그래밍 언어를 통해서 HTML 문서 등에 접근할 수 있도록 해준다.

 

DOM 의 역할 덕분에 프로그래밍 언어에서도 웹 페이지의 요소나 스타일 등을 추가하거나

수정하는 등 다양한 작업을 진행할 수가 있다.

 

문서를 하나의 구조화된 형식으로 표현을 하기 때문에 이러한 구조를 통해서 원하는 동작을 할 수가 있다.

- 특히 DOM 은 객체 (object) 로 표현을 하는데 이 때 object 란 자바스크립트에서 사용되는 데이터 구조 중 하나

  파이썬에서는 자바스크립트의 object 와 비슷한 dictionary 가 존재

 

즉, DOM 을 통해서 프로그래밍 언어에서 사용할 수 있는 데이터 구조 형태로 작업을 수행할 수 있어

크롤링 등 웹 페이지와 작업할 때 매우 중요한 개념 중 하나

DOM 메소드

DOM 을 사용할 수 있는 가장 손쉬운 방법 중 하나는 웹 브라우저에서 개발자 도구를 열어

콘솔 창으로 들어가 자바스크립트를 통해 사용

 

사용이유:

하나의 거대 문자열로 웹 페이지를 인식하게 되면 텍스트를 해석하고( 파이썬 크롤링 .text )원하는 정보를 찾을 때에 구별하기가 쉽지가 않다.

따라서 보통은 웹페이지를 텍스트 형식으로 사용하는 것이 아닌 DOM 을 활용

 

document.querySelectorAll('p')

= 'NodeList' 라는 'p' 태그를 사용하는 요소들을 담은 유사 배열이라는 것을 받을 수 있다.

 

  • getElementsbyTagName: 태그 이름으로 문서의 요소들을 리턴합니다.
  • getElementById: 'id' 가 일치하는 요소들을 리턴합니다.
  • getElementsByClassName: '클래스' 가 일치하는 요소들을 리턴합니다.
  • querySelector: 셀렉터(들)과 일치하는 요소를 리턴합니다.
  • querySelectorAll: 셀렉터(들)과 일치하는 모든 요소들을 리턴합니다.

 

728x90

댓글