bind:this para referências a elementos do DOM
Obtenha uma referência a um nó do DOM para interações imperativas.
bind:this para referências a elementos do DOM é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Obter uma referência do DOM
Use bind:this para obter uma referência a um elemento do DOM, de forma semelhante a useRef no React.
Declarar e vincular
Declare uma variável e depois faça a vinculação.
<script>
let inputEl;
</script>
<input bind:this={inputEl} />Disponível após a montagem
A referência não está disponível até que o componente seja montado. Use onMount para acessá-la com segurança.
<script>
import { onMount } from "svelte";
let inputEl;
onMount(() => inputEl.focus());
</script>Métodos imperativos
Chame métodos do DOM, como focus(), scrollIntoView() ou métodos para reproduzir mídia.
function play() { audioEl.play(); }Ler o layout
Use getBoundingClientRect() para obter medidas. Envolva a operação em tick() se acabou de fazer alterações.
Referências a componentes
bind:this também funciona em componentes do Svelte. A variável contém a instância do componente.
<MyComp bind:this={comp} />Chamar métodos de componentes
Métodos exportados pelo componente por meio de export function podem ser chamados através da referência.
Vários elementos
Para listas, você pode reunir referências em uma matriz, mas considere usar ações.
Quando evitar
Prefira vinculações declarativas e estado reativo a referências imperativas sempre que possível.
Limpeza
A referência fica nula quando o elemento é desmontado. Evite referências obsoletas.
Combinar com ações
Para padrões repetidos do DOM, encapsule-os em uma ação do Svelte em vez de usar bind:this.
Verificação rápida
Quando você pode usar o elemento vinculado?
Recapitulação
bind:this expõe uma referência a um elemento do DOM ou a um componente, disponível a partir de onMount para operações imperativas.
Perguntas Frequentes
A aula “bind:this para referências a elementos do DOM” é grátis?
Sim — o texto completo de “bind:this para referências a elementos do DOM” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “bind:this para referências a elementos do DOM”?
Obtenha uma referência a um nó do DOM para interações imperativas. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “bind:this para referências a elementos do DOM”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- bind:value para entradas de texto
- bind:checked para caixas de seleção
- bind:group para grupos de opções e caixas de seleção
- bind:this para referências a elementos do DOM