[WEB] XPath로 SVG 요소 식별하기

튜토리얼 출처: https://www.udemy.com/course/xpath-tutorial-from-basic-to-advance-level/

사용법 요약 ->  //*[local-name() = 'svg'] : local-name() 함수로 엘리먼트의 이름을 매칭.

---

XPath를 통해  svg 요소를 찾을 때 //svg 같은 문법을 사용할 수 없다고 하는데, 이는 표준 수준에서 지원하지 않는 기능이라고 한다. 다행히도 XPath에는 요소의 이름을 가져오는 함수가 2개 존재한다.

• name( [node-set] ): 노드 집합 내 첫 번째 노드의 QName을 반환한다. 
• local-name( [node-set] ): 노드 집합 내 첫 번째 노드의 local name을 반환한다.

 QName은 Qualified Name의 약자로, <prefix:local-name>의 형식으로 나타난다. 여러 XML 문서를 통합할 때 동일 이름의 요소가 중복해서 출현하는 문제를 대비하여 "식별"의 목적으로 prefix을 사용한다고 한다. 이때 html은 prefix 표기를 사용하지 않아 두 가지 중 뭘 사용하더라도 상관없으나, 좀 더 정확한 의미에서 local-name 함수를 사용하자.

 네이버 홈페이지에서 N이라고 되어 있는 svg 요소를 검색해보자.

ex) //*[local-name() = 'svg']

찾고싶은 svg 요소

//svg는 유효하지 않다.

local-name을 이용

선택된 svg 요소

 내가 본 강의에서는 svg의 자식 엘리먼트(path) 등에 대해서는 local-name( ) 대신 name( )을 사용하라고 하는데, 정확한 이유는 설명해주지 않아서 잘 모르겠다. 검색해봐도 딱히 관련된 내용은 나오지 않아서, 그냥 기록만 해둔다.