jQuery에서 XPath를 선택 가능한 CSS3 형식으로 변환하려면 JavaScript 또는 jQuery 라이브러리가 필요합니다.
-
22-07-2019 - |
문제
XPath를 어떻게 변환 할 수 있습니까?
/html/body/div[3]/ul/li[1]/a[5]
html > body > div[3] > ul > li[1] > a[5]
INDEX는 CSS3 선택기와 함께 지원되지 않는다고 생각합니다.
해결책
지글 지글/jQuery가 CSS3 선택기를 적용 할 수 없다는 것을 알게되면 xpath 플러그인 이것은 jQuery의 원래 릴리스의 일부였습니다 (그리고 실제로 사용한 사람이 거의 없기 때문에 제거되었습니다).
브라우저의 XPath 구현은 많은 경향이 있습니다 더 빠르게 CSS 엔진보다. 또한 js parse 및 xpath 표현식을 CSS3로 변환 한 다음 브라우저가 구현할 수있는 jQuery munge를 갖는 것 (일반적으로 CSS2.1 선택기가 약간의 JS 지원을받을 수 있습니다). 많이 브라우저에서 직접 XPath를 실행하는 것보다 느립니다.
뿐만 아니라 Xpath가 CSS가 할 수없는 일이 있습니다. 예를 들어:
//h3[class="blog-title"]/../../div[class="blog-entry"]//input[fn:floor(value) > 3]
XPath가 실행하기에 지나치게 복잡하지는 않지만 CSS만으로는 불가능합니다. DOM을 뒤로 이동시키고 표현식의 일부로 기능을 실행하는 것은 CSS3에서도 아직 수행 할 수 없습니다.
다른 팁
Selenium 1 's CSS 로케이터 엔진은 CSSQuery에서 jQuery의 CSS 선택기 라이브러리 인 Sizzle로 이동했습니다. 그래서 당신은 변환 할 수 있습니다
div[3]/ul/li[1]/a[5]
에게
css=div:nth(3)>ul>li:nth(1)>a:nth(5)
그리고
//h3[class="blog-title"]/../../div[class="blog-entry"]//input[@value=3]
변환 할 수 있습니다
css=h3.blog-title:parent(div.blog-entry) input[value=3]
하지만 //input[@value>3]
더 많은 정보를 위해 가능하거나 까다로울 수 없습니다. https://github.com/jquery/sizzle/wiki/sizzle-home
IE의 XPath 구현은 매우 느립니다. IE6에서 끔찍한 느리게도 대부분의 사람들이 Regex 등을 기반으로 CSS 선택기를 사용하는 경향이 있습니다. Sizzle 또는 최신은 Qwery입니다. 인덱스 선택의 경우 선택기 CSS에서 사용하십시오. :nth-child(n)
a[5] = :nth-child(5)
0 또는 1으로 시작하는지 기억할 수 없으므로 4 일 수도 있습니다.
또한 선택하는 부모 내에 다른 유형의 자녀가있는 경우 사용할 수 있습니다. :nth-of-type()
주어진 유형 만 선택합니다. 귀하의 경우 :
a:nth-of-type(5)