borrame.com - Colección particular de recortes de código y documentación para programación web

Canales RSS

Lo más fresco

  1. Enlaces sobre desarrollo web Modificado
  2. Cadena aleatoria en PHP Modificado
  3. Recortar texto Nuevo

Sugerencias del chef

Lo más visitado

  1. Canales RSS
  2. Formato condicional según el día de la semana
  3. Enlaces sobre desarrollo web
  4. Recortar texto
  5. Convertir de minutos a horas
Compartir esta página

Seleccionar nodo

Esta función selecciona todo el texto de un nodo HTML (una tabla, una lista, un párrafo…). El resultado es igual que si lo hubiéramos hecho manualmente arrastrando con el ratón.

/** * Crea una selección que engloba el nodo indicado * * @param {Node} nodo Elemento de la página * @version 2013-11-27 */ function seleccionarNodo(nodo){ var rango, seleccion; // Creamos un rango y le asignamos el nodo if(document.createRange){ // W3C rango = document.createRange(); rango.selectNode(nodo); }else if(document.body.createTextRange){ // IE<9 rango = document.body.createTextRange(); rango.moveToElementText(nodo); }else{ return; } // Seleccionamos el rango if(window.getSelection){ // W3C seleccion = window.getSelection(); seleccion.removeAllRanges(); // Eliminar selección actual seleccion.addRange(rango); }else if(rango.moveToElementText){ // IE<9 rango.select(); } }

El código es compatible con Firefox 2+, Internet Explorer 6+ y Google Chrome.

En Opera no ha funcionado correctamente hasta bien entrada la vesión 12 (verificado en 12.11). Pero imagino que da igual porque a partir de la 13 se han pasado a Webkit.

En Konqueror 3 no parecía funcionar allá por 2008. Supongo que lo habrán arreglado pero ahora mismo no tengo con qué probarlo.

Ejemplos de uso

Con la amable colaboración de las funciones para asignar eventos podemos conseguir que al hacer doble clic sobre cualquier tabla de la página ésta se seleccione entera. Así es facilísimo copiarla al portapapeles y sorprender a amigos y vecinos pegándola en Excel, Word, etc. Nota: este ejemplo no contempla el caso de tablas anidadas; no digo que funcione bien o mal, sólo que ni lo he mirado.

(function () { /* * Permitimos seleccionar las tablas de la página haciendo doble clic */ var tablas = document.getElementsByTagName("table"); for (var i = 0, len = tablas.length; i < len; i++) { addEvent(tablas[i], "dblclick", function () { seleccionarNodo(this); }); } })();

Naturalmente, no es imprescindible rebosar tanta sofisticación:

<input type="button" value="Seleccionar" onclick="seleccionarNodo(document.getElementById('foo'))">

Demo

Haz doble clic sobre la tabla. Después puedes copiar la selección y pegarla en tu hoja de cálculo favorita.

EneroFebreroMarzoAbrilMayoJunioJulioAgosto
193,00144,07179,4129,90146,79271,83135,9165,24
135,9135,34173,9778,838,1551,6597,8627,18
122,32250,0816,31144,0751,65187,56201,15146,79
114,17122,32144,07179,41168,5389,70127,7635,34
130,48106,01122,32203,87157,6632,62258,24127,76

O dale con salero al botón:

Historial

v2013-11-27
Código más compacto. Detectar funcionalidades en lugar de capturar excepciones.
Documentar en formato jsdoc.
v2009-07-22
Arreglado el bug de la celda duplicada en Firefox.
v2008-04-23
Primera versión.

Esta página ha sido impresa el miércoles 12 de agosto de 2026 (16:23:56 +0200) desde https://borrame.com/recortes/javascript/seleccionar-nodo.html. La última vez que miré contenía HTML válido con CSS fresquito y si tiene flatas de ortografía ha sido sin querer.

Lorem ipsum dolor sit amet.

© 2005-2026 by Álvaro González (alvaro.es) • Burgos (España) • borrame.com