En este capítulo cubriremos la selección en el documento, así como la selección en campos de formulario, como <input>.
JavaScript puede acceder una selección existente, seleccionar/deseleccionar nodos DOM tanto en su totalidad como parcialmente, eliminar la parte seleccionada del documento, envolverla en una etiqueta, etc.
Puedes encontrar algunas recetas para tareas comunes al final del artículo, en la sección “Resumen”. Pero será mucho más beneficiosa la lectura de todo el capítulo.
Los objetos subyacentes Range y Selection son fáciles de captar y no necesitarás recetas para que hagan lo que deseas.
Range
El concepto básico de selección Range, es básicamente un par de “puntos límite”: inicio y fin del rango.
Un objeto rango se crea sin parámetros:
let range = new Range();Entonces podemos establecer los límites de selección usando range.setStart(node, offset) y range.setEnd(node, offset).
En adelante usaremos objetos Range para selección, pero primero creemos algunos de ellos.
Seleccionando el texto parcialmente
Lo interesante es que el primer argumento node en ambos métodos puede ser tanto un nodo de texto o un nodo de elemento, y el significado del segundo argumento depende de ello.
Si node es un nodo de texto, offset debe ser la posición en su texto.
Por ejemplo, dado el elemento <p>Hello</p>, podemos crear el rango conteniendo las letras “ll”:
<p id="p">Hello</p>
<script>
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.firstChild, 4);
// toString de un rango devuelve su contenido como un texto
console.log(range); // ll
</script>Aquí tomamos el primer hijo de <p> (que es el nodo de texto) y especificamos la posición del texto dentro de él: