[SOLUCIONADO] capturar title de a href de una página con shell

[antonio715715]

Código Javascript:

var allTitles, thisTitle;
allTitles = document.evaluate(
"//a/@href//title/text()", //los textos de los títulos de todos los enlaces
document.getElementById('simulacion_tabla'), //contenidos en esta tabla definida por su id
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
 
for (var i = 0; i < allTitles.snapshotLength; i++) {
thisTitle = allTitles.snapshotItem(i);
    document.getElementById('simulacion_tabla').getElementsByClassName('col1')[i].insertAdjacentHTML(
        "beforeend", thisTitle);
}
 

pongo este código en el shell aplicado a una página, respuesta: [object XPathResult]
pero no inserta el texto del título como yo quiero
pruebo otra cosa:

Código Javascript:

var allTitles, thisTitle; allTitles = document.evaluate( "//a/@href//title/text()", document.getElementById('simulacion_tabla'), null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); alert(allTitles.snapshotItem[35]);
 

pero el alert muestra undefined como si los títulos estuvieran vacíos cuadno no lo están.

ejemplo de unos de los a href de esta tabla:

Código HTML:

<div id="simulacion_tabla">
<ul>
<li>
<ul>
<li class="col1"><a href="http://www.expansion.com/directorio-empresas/proyectos-y-estudios-de-ingenieria-y-arquitectura-montero-sa_677233_M89_28.html" title="proyectos y estudios de ingenieria y arquitectura montero sa">PROYECTOS Y ESTUDIOS DE INGENIERIA Y ARQUITECTURA MONTERO SA</a></li>
<li class="col2">MADRID</li>
<li class="col3">MADRID</li>
</ul>
</li>
<li>
<ul>
<li class="col1"><a href="http://www.expansion.com/directorio-empresas/proyectos-y-gestion-de-negocios-sl_1364971_M89_28.html" title="proyectos y gestion de negocios sl">PROYECTOS Y GESTION DE NEGOCIOS SL</a></li>
<li class="col2">MADRID</li>
<li class="col3">MADRID</li>
</ul>
</li>
 

etc
quiero capturar ese title (o el texto que se muestra en el link, que no sé cómo hacerlo).
Qué hago mal? gracias

[Alexis88]

Revisa en la consola del navegador el resultado de esto:

Código Javascript:

console.log(allTitles);
 

Así podremos ver realmente qué contiene y, de esa manera, saber cómo abordarlo.

[antonio715715]

y dónde hay que poner ese código??
lo puse en el shell a continuación y en la sola de la página en la que lo ejecutaba salía:

XPathResult { resultType: 6, invalidIteratorState: false, snapshotLength: 0 } try{%20Shell.printAnswer(eval('with(Shell._scope)% 20with(Shell.shellCommands)%20{'%20+%20Shell.quest ion%20+%20String.fromCharCode(10)%20+%20'}'));%20} %20catch(er)%20{%20Shell.printError(er);%20};%20se tTimeout(Shell.refocus,%200);%20void%200%20line%20 1%20>%20eval:13:7

pero no sé si es eso lo que dices..

[Alexis88]

La consola del navegador es una de las herramientas para desarrolladores que ofrecen los navegadores web. Puedes encontrarla en las opciones del mismo o, en navegadores como Chrome, Edge y Firefox, pulsando la tecla F12.

[antonio715715]

sí pero dónde hay que pegar el código console.log(allTitles);?

[Alexis88]

En el espacio en blanco del panel que se despliega al pulsar F12.

[antonio715715]

console.log(allTitles);
XPathResult { resultType: 6, invalidIteratorState: false, snapshotLength: 0 }
undefined

eso en la ventana de la página donde apliqué el shell

console.log(allTitles);
ReferenceError: allTitles is not defined [Saber más]

en la ventana del shell misma

[Alexis88]

Claro. Es que, en el contexto de la consola, no está definida la variable. Lo que debes hacer es colocar dicha línea en tu código JavaScript y el resultado se mostrará en la consola.

[antonio715715]

sale lo mismo...

[Alexis88]

No debería aparecer el mensaje de que la variable no está definida, a menos de que estés colocando la línea antes de la definición de la variable.

¿Cuál es el resultado exacto de esto?

Código Javascript:

var allTitles, thisTitle;
allTitles = document.evaluate(
"//a/@href//title/text()", //los textos de los títulos de todos los enlaces
document.getElementById('simulacion_tabla'), //contenidos en esta tabla definida por su id
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
 
console.log(allTitles);
 

[antonio715715]

XPathResult { resultType: 6, invalidIteratorState: false, snapshotLength: 0 }

eso pone en la consola..
en el shell no hay ningún resultado..

[Alexis88]

Ahí está la respuesta. No logras iterar sobre el resultado ni obtienes un valor en particular utilizando un índice porque no hay resultados (snapshotLength: 0).

El problema está en el xpathExpression. Si lo que deseas obtener son los títulos de los enlaces, solo toma a los enlaces y, en cada iteración, tomas el valor del título de cada uno de ellos:

Código Javascript:

var allTitles, thisTitle;
allTitles = document.evaluate(
"//a",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
 
for (var i = 0, l = allTitles.snapshotLength; i < l; i++){
    console.log(allTitles.snapshotItem(i).title);
}
 

Edito: Eso quiere decir que el primer intento no estuvo fuera del contexto.

[antonio715715]

Código Javascript:

var allTitles, thisTitle;
allTitles = document.evaluate(
"//a",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
 
for (var i = 0; i < allTitles.snapshotLength; i++) {
thisTitle = allTitles.snapshotItem(i);
    document.getElementById('simulacion_tabla').getElementsByClassName('col1')[i].insertAdjacentHTML("beforeend", thisTitle);
}
 

este es el utimo codigo que tengo que funciona a medias, a saber:
1- coge todos los anchor cuando yo sólo quiero que coja los que están en id="simulacion_tabla", pero estoy poniendo en el ámbito del document.evaluate en el segundo parámetro document.getElementById('simulacion_tabla') pero no hace caso, funciona de la misma manera.
Sin embargo en la otra función insertAdjacentHTML sí pega los enlaces dentro de la tabla como se le indica. Pero al haber cogido todos los enlaces de la página en lugar de los de la tabla al pegarlos no se corresponde cada link.
2-está cogiendo los links, cuando lo que quería coger eran los titles de los links (o mejor el valor mostrado, aunque en este caso es el mismo). Pero no consigo seleccionar sólo el title..

[Alexis88]

Fácil:

1. Cambia el segundo argumento, document, por el que usaste al inicio, document.getElementById('simulacion_tabla'). Usé document porque lo tenía así de un ejemplo viejo y olvidé cambiarlo para este caso.
2. Te faltó tomar el valor de la propiedad title. Basándonos en mi ejemplo, debería queda así:

Código Javascript:

document.getElementById('simulacion_tabla').getElementsByClassName('col1')[i].insertAdjacentHTML("beforeend", thisTitle.title);
 

[antonio715715]

1. no qué va, ya lo cambié y no funciona. Es decir, funciona exactamente igual con document que con document.getElementById('simulacion_tabla')
2. Ahora sí inserta sólo el title pero a partir de la fila 30 o algo así, hace una cosa muy rara. Inserta en las cuatro primeras filas de la tabla los title de ir a facebook, ir a nosé qué más. Y a partir de la 30 empieza a insertar los title de los anchor de la tabla...me tiene descolocado..

[Alexis88]

Ya encontré la forma. La xpathExpression debe tener esta forma:

Código xpathExpression:

//div[@id='simulacion_tabla']//a
 

Y la línea de la inserción sería así:

Código Javascript:

document.getElementById('simulacion_tabla').getElementsByClassName('col1')[i].insertAdjacentHTML("beforeend", thisTitle.title);
 

DEMO

De esta manera, obtenemos los enlaces contenidos en el <div> de id "simulacion_tabla". Ten cuidado con esto ya que yo estoy suponiendo que se trata de un <div>. Si es otro tipo de elemento, cambia esa parte.

[antonio715715]

Sí señor Alexis, ahora funciona como es debido:

Código Javascript:

var allTitles, thisTitle;
allTitles = document.evaluate(
"//div[@id='simulacion_tabla']//a",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
 
for (var i = 0; i < allTitles.snapshotLength; i++) {
thisTitle = allTitles.snapshotItem(i);
    document.getElementById('simulacion_tabla').getElementsByClassName('col1')[i].insertAdjacentHTML("beforeend", thisTitle.title);
}
 

y cómo podria conseguir el valor que aparece en el link? he puesto el title por que el valor es el mismo pero podría no serlo

Código HTML:

<li class="col1"><a href="http://www.expansion.com/directorio-empresas/proyectos-y-estudios-de-ingenieria-y-arquitectura-montero-sa_677233_M89_28.html" title="proyectos y estudios de ingenieria y arquitectura montero sa">PROYECTOS Y ESTUDIOS DE INGENIERIA Y ARQUITECTURA MONTERO SA</a></li>
<li class="col2">MADRID</li>
<li class="col3">MADRID</li>
 

en este caso el texto que aparece en mayúsculas que creo que casualmente es el mismo.
He probado con thisTitle.value pero me devuelve undefined

[Alexis88]

La propiedad value es propia de elementos de formulario, como los <input>, <textarea> y <select>. Para el caso del enlace, puedes utilizar, entre otras, la propiedad innerHTML.