Webscraping의 기초 - XPath

Xpath가 필요할 때는, HTML 내에서 중요한 요소를 가져오는 WebScraping을 사용할 때가 대부분이다. 즉, 웹화면에서 원하는 정보를 가져오고자 할 때, Chrome 브라우저의 개발자 모드에서 Xpath를 가져올 때 사용된다.

1. 1 xpath의 정의

• Xpath란:
  • XPath는 XML 문서 내에서 원하는 요소나 속성을 선택하기 위한 경로 언어
  • "XML Path Language"의 약자
  • XML 문서의 구조를 탐색하고 쿼리하기 위한 표준화된 방법을 제공
• Xpath 사용법:
  • XPath를 사용하여 XML 문서에서 원하는 요소나 속성을 선택하고 조작하는 방법은 다음과 같다:
  1. 요소 선택:
     • /: 루트 요소를 선택합니다.
     • //: 현재 노드에서 재귀적으로 모든 하위 요소
     • element_name: 특정 요소 이름을 지정하여 해당 요소를 선택
     • [predicate]: 조건을 추가하여 요소를 선택
  2. 속성 선택:
     • @attribute_name: 특정 속성을 선택
  3. 조건 추가:
     • [@attribute_name='value']: 특정 속성의 값이 지정된 값과 일치하는 요소를 선택
     • [position()]: 요소의 위치를 기반으로 선택
  4. 함수 사용:
     • text(): 텍스트 노드를 선택
     • contains(): 지정된 문자열이 포함된 요소를 선택
     • count(): 선택된 요소의 개수를 반환
     • concat(): 문자열을 연결
  5. 예제:
     • //bookstore/book:
       • 모든 bookstore 요소의 하위에 있는 book 요소를 선택
     • //book[@category='fiction']:
       • 모든 카테고리가 'fiction'인 book 요소를 선택
     • //bookstore/book[1]:
       • 첫 번째 book 요소를 선택합니다.
     • //book[price<30]:
       • 가격이 30보다 작은 모든 book 요소를 선택
     • //book[contains(title, 'Harry Potter')]:
       • 제목에 'Harry Potter' 문자열을 포함하는 book 요소를 선택

1. 2 chrome에서 xpath를 찾는 법

Google Chrome 브라우저에서 XPath를 찾는 방법은 다음과 같다/

1. 개발자 도구 열기:
   • 웹 페이지에서 마우스 오른쪽 버튼을 클릭
   • "검사" 선택 or 단축키인
     • Ctrl + Shift + I (Windows/Linux)
     • Cmd + Opt + I (Mac)를 사용
2. Elements 탭으로 이동:
   • 개발자 도구가 열리면 Elements 탭이 활성화
   • 마우스로 이동하여 HTML 및 DOM 요소로 이동
3. 요소 선택:
   • Elements 탭에서 마우스를 사용
   • XPath를 찾으려는 요소를 선택
4. XPath 복사:
   • 선택된 Elememt에서 마우스 우클릭
   • 복사 메뉴 -> XPath 복사
5. 검색창에서 XPath 사용:
   • Ctrl(Command) + F
   • XPath를 입력
   • enter를 누르거나 화살표를 이용하여 이동
   • XPath에 해당하는 요소가 강조 표시
    

1. 3 chrome에서 console에서 xpath 출력

1. 크롬 브라우저 열기: 원하는 웹 페이지를 연다.
2. 개발자 도구 열기: 마우스 오른쪽 버튼을 클릭하고 "검사"를 선택하거나, 단축키 Ctrl + Shift + I (Windows/Linux) 또는 Cmd + Opt + I (Mac)를 사용하여 개발자 도구를 연다.
3. 콘솔 탭으로 이동: 개발자 도구가 열리면 Console 탭을 선택한다.
4. XPath 사용 태그 출력: 아래 코드를 콘솔에 입력한다.

var listItems = document.evaluate("원하는XPATH", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < listItems.snapshotLength; i++) {
    console.log(listItems.snapshotItem(i));
}

#TODO

다음은 예제이다.

1. vitageappmaker.tistory.com으로 이동한다.
2. 개발자 도구 화면으로 이동한다.
3. 리스트를 요소를 선택한다. xpath를 복사한다.

4. 

5. xpath를 수정한다.

   //*[@id="mArticle"]/div[3]
   를 다음과 같이 변경한다. 
   

    싱글 따옴표로 변경하는 것에 유의한다.
    //*[@id='mArticle']//div[@class='list_content']

 

   6. console 탭에서 다음을 입력( 붙여넣기) 하고 enter

```javascript
var listItems = document.evaluate("//*[@id='mArticle']//div[@class='list_content']", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < listItems.snapshotLength; i++) {
    console.log(listItems.snapshotItem(i));
}

7.