Segundo a Wikipedia (em livre tradução):
XPath (XML Path Language) é uma linguagem de consulta para selecionar nós de um documento XML . Além disso, o XPath pode ser usado para calcular valores (por exemplo, strings , números ou valores booleanos ) do conteúdo de um documento XML. O XPath foi definido pelo World Wide Web Consortium (W3C)
XPath usa expressões de caminho para selecionar um "nó" ou um conjunto de "nós" em um documento XML ou HTML.
O que você recebeu ao executar a função Copy XPath
foi uma "expressão de caminho" que representa um "caminho" segundo a sintaxe XPath para o "nó" no documento com o atributo id
igual a "teste" sendo as duas "barras" a indicação que a consulta parte/inicia na raiz do documento e o asterisco (wildcard) para buscar tudo, as opções (parâmetros) entre os colchetes são usadas para filtrar a consulta.
Em javascript sua interface principal utiliza Document.evaluate()
que recebe cinco parâmetros:
document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result )
- xpathExpression: expressão XPath (expressões de caminho)
- contextNode: um "nó" no documento para ser avaliado
- namespaceResolver: função para prefixos de namespace (HTML não possui namespaces)
- resultType: uma constante que especifica o tipo de resultado desejado
- result: objeto XPathResult
As "expressões de caminho" usadas por XPath pode ser absolutas representadas pela "barra" /
ou relativas (nodeName, //, .,.., @, entre outras).
O contextNode pode ser um "nó" no documento ou o próprio document
caso se deseje uma consulta "global".
Como mencionado HTML não possui "namespaces" por isto ao analisar documentos HTML o terceiro parâmetro deve receber um valor null
.
Os três tipos principais resultType são:
iteradores
- UNORDERED_NODE_ITERATOR_TYPE
- ORDERED_NODE_ITERATOR_TYPE
Um conjunto de "nós" que podem ser iterados individualmente usando iterateNext()
sobre o object (XPathResult). Caso o documento seja modificado durante uma iteração a execção NS_ERROR_DOM_INVALID_STATE_ERR
será lançada.
instantâneos
- UNORDERED_NODE_SNAPSHOT_TYPE
- ORDERED_NODE_SNAPSHOT_TYPE
Um conjunto de "nós" estáticos, os snapshots não mudam com as mutações do documento, por isto não lançam exceções caso o "nó" tenha mudado no documento ou mesmo se tenha sido removido durante a iteração.
primeiros nós
- ANY_UNORDERED_NODE_TYPE
- FIRST_ORDERED_NODE_TYPE
Retorna o primeiro nó encontrado que correspondeu à expressão XPath.
A constante ANY_TYPE
retorna-rá qualquer tipo que naturalmente resulte da avaliação da expressão. Pode ser qualquer um dos tipos simples (NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE), más, se o tipo de resultado retornado for um conjunto de "nós", ele será apenas um UNORDERED_NODE_ITERATOR_TYPE
.
Estas constantes são definidas pelo objecto XPathResult
e a lista completa de tipos pode ser encontrada no apêndice desta documentação: Mozila Developer - XPath in JavaScript
Já o resultado (result) pode ser um objeto XPathResult
ou null
(que criará um novo objeto XPathResult)
XPath possui um conjunto de funções que podem ser observadas aqui: Mozila Developer
Um exemplo básico para buscar e contar todos os elementos <p>
no documento:
let btn = document.getElementById('count')
btn.addEventListener('click', function(e) {
let paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null )
alert( 'Este documento contém ' + paragraphCount.numberValue + ' elementos de paragrafo')
}, false)
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph tree</p>
<p>...</p>
<br>
<button id="count" type="button">contar</button>
As expressões de caminho podem usar "eixos"
que complementam a query de consulta, estes "eixos" devem sempre estar envoltos em colchetes, exemplo:
//aside[@lang='en']
: seleciona todos os elementos <aside>
que têm um atributo "lang" com um valor "en"
/footer/div[last()]
: seleciona o último elemento <div>
que é o filho do elemento <footer>
/nav/button[1]
: seleciona o primeiro elemento <button>
que é o filho do elemento <nav>
Estas expressões também aceitam "operadores"
assim como "curingas" *
de modo a tornar a consulta mais construtiva.
Opinião (caso de uso)
Usei há algum tempo atrás esta sintaxe para buscar com XMLHttpRequest()
fragmentos de HTML que seriam acomodados ao DOM programaticamente más, confesso ser difícil manter a organização. Mudei de foco e passei para uma abordagem usando fetch()
e .text()
da resposta e manipular os fragmentos usando uma função especifica que criei.
No HTML uma vez que ela retorna "nós" pode ser útil para construir analisadores ou manipuladores de objetos, sua gama potencial de uso depende da proposta (necessidade) e da criatividade do desenvolvedor.
Para mim (minha critica) é só mais uma forma de atravessar documento.
Já no XML é fácil observar seu potencial, exemplo:
fetch('https://subversivo58.github.io/lab/assets/XPath-example.xml').then(r => {
if ( r.ok ) {
return r.text()
}
throw new Error('Failed request XML Document! Status code: ' + r.status)
}).then(text => {
showResult((new window.DOMParser()).parseFromString(text, "text/xml"))
}).catch(e => {
console.error(e)
})
function showResult(xml) {
var txt = "";
path = "/bookstore/book/title"
if ( xml.evaluate ) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
}
document.getElementById("demo").innerHTML = txt;
}
<p id="demo"></p>
<br>
<p>Este código foi baseado nesta <a href="https://www.w3schools.com/xml/tryit.asp?filename=try_xpath_select_cdnodes" target="_blank" rel="nofollow">fonte</a></p>
Links e documentações:
Supporte a document.evaluate
e XPath
caniuse.com
PS:
Fontes como Mozila Deleveloper, W3Schools ou MSDN carecem de apresentar nas suas documentações todas as referencias a funções, operadores ou mesmo a sintaxe usada em XPath.