HTML interop
- Dart kursu
- İleri seviye
- Ders 51/83
- 5 dk
dart:html ile DOM erişimini öğrenirsin.
dart:html
dart:html, Dart'ın tarayıcı DOM kütüphanesidir. HTML öğelerini seçme, olay (event) dinleme ve belge (document) manipülasyonu sağlar. Yalnızca tarayıcıda çalışır; konsol uygulamasında derlenmez.
Temel API: document.querySelector('#app') bir öğe seçer, element.text = 'Merhaba' metin değiştirir, element.onClick.listen(...) tıklama dinler. dart:html, dart2js ve dart2wasm ile derlenen web uygulamalarında kullanılır.
DOM manipülasyonu
dart:html ile bir öğeyi seçip içeriğini değiştirirsin. Örnek: final el = document.querySelector('#app'); el?.text = 'Merhaba';. Bu, app kimlikli öğenin metnini değiştirir.
Olay dinleme de benzer: el?.onClick.listen((e) => print('tıklandı'));. Tarayıcıda kullanıcı tıkladığında bu fonksiyon çalışır. dart:html, dart:js_interop'un üzerine inşa edilmiştir; modern Dart 3'te yeni projeler dart:js_interop'u tercih eder. Ama dart:html hâlâ yaygın; eski kodlarda görürsün.
Uygulama dart:html bilgisini yazdır
import 'dart:html'; ekle. setupDom adında bir fonksiyon tanımla: document.querySelector('#app') çağrısı yapsın. main içinde print('dart:html: DOM kütüphanesi') ve print('Seçici: querySelector') ekle.
Başlangıç kodu
// dart:html paketini içe aktar
// setupDom fonksiyonunu tanımla (DOM seçici ile öğe bul)
void main() {
// dart:html bilgisini yazdır
}Örnek çözüm
import 'dart:html';
void setupDom() {
final el = document.querySelector('#app');
el?.text = 'Merhaba';
}
void main() {
print('dart:html: DOM kütüphanesi');
print('Seçici: querySelector');
}Beklenen çıktı
dart:html: DOM kütüphanesi Seçici: querySelector
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 dart:html parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
dart:html |
DOM kütüphanesi |
document |
Belge kökü |
querySelector |
Seçici |
Element |
Düğüm türü |
2 dart:html nerede çalışır?
- Tarayıcıda Doğru cevap
- CLI uygulamasında
- Sunucuda
- Mobilde
Açıklama: dart:html yalnızca tarayıcıda çalışır.
3 querySelector çağrısı
document.____('#app');document.querySelector('#app');Açıklama: document.querySelector('#app') öğeyi seçer.