HTML interop

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.

Örnek çözümü göster

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');
}

Kendini test et

dart:html parçalarını eşleştir

dart:html

DOM kütüphanesi
document

Belge kökü
querySelector

Seçici
Element

Düğüm türü
dart:html nerede çalışır?
- Tarayıcıda
- CLI uygulamasında
- Sunucuda
- Mobilde
Cevabı göster

Tarayıcıda — dart:html yalnızca tarayıcıda çalışır.

querySelector çağrısı

document.____('#app');

Cevabı göster

document.querySelector('#app');

Sıradaki ders: JS interop

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler