[SELECTOR] XPATH와 CSS Selector 차이

  처음 python으로 크롤러를 만들때 requests와 bs4를 사용하였는데, bs4에는 XPATH에 대한 개념이 존재하지않았다. 그래서 자연스럽게 CSS Selector에 익숙해져 있었는데, Selenium과 Scrapy를 접하면서 XPATH를 사용하는 예제들이 많이 보였고 자연스럽게 XPATH에 대해서 알아보고 사용하게 되었다. 이 포스트는 사용하면서 느낀 두 선택자에 대한 정리이다.

 

  우선 CSS Selector는 태그의 패턴을 이용해 탐색하는 선택자이며, 웹 개발자에게 가장 익숙한 선택자일 것이다. stylesheets나 javascript에서 document.querySelector() 또는 jquery로 많이 접해봤을 것이다. 그만큼 우리에게 익숙하고 널리 사용되고 있는 선택자이다.

  필자도 javascript로 웹 개발을 배우면서 많이 사용했었는데 그 때마다 가장 아쉽게 느껴졌던 부분이 '원하는 범위의 값을 가진 태그'를 선택하는 선택자가 없다는 것이었다. 예를 들어, 'value가 50이상인 input태그를 선택'한다고 했을 때 방법이 없다. 그냥 a태그 전체를 탐색해서 50이상인 태그만 스타일을 적용해주는 스크립트를 작성해야만 했다. 또, 선택한 태그들의 값을 바로 뽑아서 사용하고 싶어도 map으로 한번 가공해줘야했다.

 

  그런데, 그것이 가능해졌다. 바로 XPATH 때문이다. XPATH는 XML 경로 언어라고 하며 Node의 경로를 query로 탐색하는 선택자이다. 위에서 CSS Selector가 하지못했던 일을 XPATH는 할 수 있다. "//input[value>=50]". 매우 간단한 방법으로 처리한다. 또한, 선택된 태그의 값만 가지고 오려면 "//input[value>=50]/@value" 이렇게 사용하면 된다. 이 외에도 4번째에 있는 자식 태그를 탐색하기위해 "div:nth-child(4)"와 같이 복잡한 문법이 아니라, "//div/*[4]" 간결한 문법을 제공한다.

 

  아직 사용해본지 얼마 안되어서 단점과 제약조건 등을 파악하지는 못하였다. 앞으로 계속 사용해보면서 정리해보도록 하겠다.

 

 

-- 참고사이트

 

https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

https://www.w3schools.com/xml/xpath_syntax.asp

XPath Syntax

https://developer.mozilla.org/ko/docs/Introduction_to_using_XPath_in_JavaScript

Introduction to using XPath in JavaScript