Javascript, XPath o "como mandar getelement* al tacho"

Como saben, estuve programando MUCHO en javascript para hacer la extension Enigform para Firefox. Obviamente, me puse a crear extensioens para otras cosas.

Ahora, tuve que desempolvar mi javascript, que estaba bastante oxidado, asi que estuve chusmeando por aqui y por alli… de hecho, estoy pensando una serie de articulos de como hacer extensiones para firefox, ya que casi toda la documentacion que hay esta en inglish 😛

Por el momento, les paso este tip:

Vieron que se puede encontrar, digamos, todos los elementos cuyo tag html sea TD y luego acceder al innerHTML y modificarlo, mediante el uso del array devuelto por el metodo getElementsByTagName. Por ejemplo, digamos que tenemos esta tabla:


<HTML>
<BODY>
<TABLE>
<TR>
<TD>celda 1</TD>
<TD>celda 2</TD>
</TR>
<TR>
<TD>celda a</TD>
<TD>celda b</TD>
<TD>celda c</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Como ven, podriamos referencia a la “celda b”, usando:


var celdaB = document.getElementsByTagName["td"][3];

y el “celdaB.innerHTML” seria el texto “celda b”.

Ahora, tambien podriamos referenciar a la celda B mediante algo llamado XPath:


var celdaB = document.evaluate(
'/html/body/table/tbody/tr[2]/td[2]',
document,
null,
XPathResult.STRING_TYPE,
null).stringValue);

y “celdaB” seria un string = “celda b”, PERO no tenemos acceso a innerHTML, o sea, XPath, en principio, parece ser de solo lectura.

Obviamente, despues de googlear un cacho, finalmente encontre la respuesta a mi dilema “Como usar XPath para referenciar un objeto, y tambien poder modificarlo?”. Sencillo, mediante el uso de XPath SnapShots, o de First Nodes. Para simplificar el ejemplo, voy a mostrarles un caso First Node:


celdaB = doc.evaluate(
'/html/body/table/tbody/tr[2]/td[2]',
doc,null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
null);

celdaB.singleNodeValue.innerHTML = "Nuevo texto de celda B";

Sencillo y elegante, no?

Los invito a investigar mas sobre XPath: Introduction to using XPath in JavaScript

Saludos,
Buanzo

Artículos relacionados:

Si te gustó este articulo, ¿ Porque no dejas un comentario a continuación y continuas la conversación, o te suscribes a los feeds y recibes los artículos directamente en tu lector?

Comentarios

No comments yet.

Sorry, the comment form is closed at this time.