bind:this para referencias a elementos del DOM
Obtenga una referencia a un nodo del DOM para realizar interacciones imperativas
bind:this para referencias a elementos del DOM es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Obtener una referencia al DOM
Use bind:this para obtener una referencia a un elemento del DOM, de forma similar a useRef en React.
Declarar y asociar
Declare una variable y, a continuación, asóciela.
<script>
let inputEl;
</script>
<input bind:this={inputEl} />Disponible después del montaje
La referencia es null hasta que se monta el componente. Use onMount para acceder a ella de forma segura.
<script>
import { onMount } from "svelte";
let inputEl;
onMount(() => inputEl.focus());
</script>Métodos imperativos
Llame a métodos del DOM como focus() y scrollIntoView(), o reproduzca contenido multimedia.
function play() { audioEl.play(); }Leer el diseño
Use getBoundingClientRect() para obtener medidas. Envuélvalo en tick() si acaba de realizar cambios.
Referencias a componentes
bind:this también funciona con componentes de Svelte. La variable contiene la instancia del componente.
<MyComp bind:this={comp} />Llamar a métodos del componente
Los métodos exportados desde el componente mediante export function se pueden llamar a través de la referencia.
Varios elementos
Para listas, puede recopilar referencias en un array, aunque considere usar acciones en su lugar.
Cuándo evitarlo
Siempre que sea posible, prefiera las asociaciones declarativas y el estado reactivo a las referencias imperativas.
Limpieza
La referencia se convierte en null cuando se desmonta el elemento. Evite las referencias obsoletas.
Combinar con acciones
Para patrones del DOM repetidos, encapsúlelos en una acción de Svelte en lugar de usar bind:this.
Comprobación rápida
¿Cuándo puede usar el elemento asociado?
Resumen
bind:this expone una referencia al DOM o al componente, disponible a partir de onMount para realizar operaciones imperativas.
Preguntas frecuentes
¿La lección «bind:this para referencias a elementos del DOM» es gratis?
Sí — el texto completo de «bind:this para referencias a elementos del DOM» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «bind:this para referencias a elementos del DOM»?
Obtenga una referencia a un nodo del DOM para realizar interacciones imperativas Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «bind:this para referencias a elementos del DOM»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- bind:value para entradas de texto
- bind:checked para casillas de verificación
- bind:group para grupos de botones de opción y casillas
- bind:this para referencias a elementos del DOM