El método setStart() se usa para establecer la posición inicial de un rango . El startNode se puede usar como un Node de texto, Nodes secundarios, etc. El startOffset puede ser la cantidad de caracteres desde el inicio de startNode o puede ser la cantidad de Nodes secundarios entre el inicio de startNode .
Sintaxis:
range.setStart(startNode, startOffset);
Parámetros:
- startNode: el Node que se utiliza para iniciar el rango.
- startOffset: este parámetro es el índice de compensación mayor o igual a cero que representa el índice para el inicio del rango desde el Node de inicio.
Valor devuelto: este método no devuelve ningún valor.
Ejemplo 1: en este ejemplo, establezca el inicio de los Nodes secundarios de rango de un Node principal.
Este ejemplo usa el método setStart() para establecer los Nodes secundarios iniciales del rango. Aquí, hemos usado el método setEnd() para establecer el final del rango. Para mayor claridad del rango definido, hemos convertido el rango seleccionado en texto usando el método toString() .
HTML
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<p id="parent">
Child 1<br>
Child 2<br>
</p>
<script>
const example = document
.getElementById('parent');
const range = document.createRange();
range.setStart(example, 0);
range.setEnd(example, 3);
console.log(range);
console.log(range.toString());
</script>
</body>
</html>
Salida: En la consola, se puede ver el rango creado.
Ejemplo 2: en este ejemplo, establezca el inicio del rango obteniendo los caracteres de un Node de texto.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<p id="example">
Characters of this node will
be used to set the range.
</p>
<script>
const example = document
.getElementById('example');
const textNode = example.childNodes[0];
const range = document.createRange();
// Starting of range will
// be 0th character
range.setStart(textNode, 0);
// Ending of range will be
// 54th character
range.setEnd(textNode, 54);
console.log(range);
console.log(range.toString())
</script>
</body>
</html>
Salida: En la consola, se puede ver el rango creado.
Navegadores compatibles:
- Google cromo 1
- Borde 12
- Firefox 1
- Safari 1
- Ópera 9
- explorador de Internet 9