Bisakah kita menggunakan dart dengan html?

Setiap halaman web dapat dianggap sebagai objek dan ada di dalam jendela browser. Kita dapat mengakses halaman web menggunakan browser web dan harus terhubung ke internet. DOM adalah singkatan dari model objek Dokumen. Objek Dokumen menunjukkan dokumen HTML yang ditampilkan di jendela itu. Model objek dokumen terdiri dari beberapa properti yang mengacu pada objek lain yang memberikan fasilitas untuk mengubah isi dokumen

Proses konten dokumen diakses disebut Document Object Model, atau DOM. Objek diatur dalam hierarki. Struktur hierarki digunakan untuk mengatur objek dalam dokumen web

• Jendela - Ini adalah yang pertama dalam hierarki. Itu elemen terluar dari hierarki objek
• Dokumen - Saat dokumen HTML dimuat ke dalam jendela, dokumen itu menjadi objek jendela. Dokumen tersebut mencakup konten halaman
• Elemen - Ini menunjukkan konten di halaman web. Misalnya - Judul, kotak teks, dll
• Node - Ini sering berupa elemen, tetapi juga berupa atribut, komentar, teks, dan tipe DOM lainnya

Di bawah ini adalah hierarki dari beberapa objek DOM yang penting

Kita bisa memanipulasi objek dan elemen di DOM dengan menggunakan dart. perpustakaan html. Aplikasi berbasis konsol tidak dapat menggunakan dart. perpustakaan html. Dalam bekerja dengan pustaka HTML di aplikasi web, kita perlu mengimpor dart. html

Mari kita pahami operasi DOM di bagian berikut

Menemukan Elemen DOM

Sebuah dokumen dapat berisi banyak atribut terkadang kita perlu mencari atribut tertentu. Anak panah. pustaka html menyediakan fungsi querySelector untuk mencari elemen di DOM

Fungsi querySelector() mengembalikan elemen dari DOM dan onClick yang diberikan. listen() akan mengambil metode eventHandler yang akan dipanggil saat acara klik dimunculkan. Sintaks eventHandler diberikan di bawah ini?

Jadi ketika mengekstraksi data dari situs web dengan Dart, paket Html adalah solusinya. Html adalah paket Dart sumber terbuka yang digunakan terutama untuk mengekstraksi data dari HTML. Ini juga memungkinkan Anda untuk memanipulasi dan menghasilkan output HTML. Dalam pengembangan terus-menerus oleh tim Dart, anehnya kami jarang membicarakannya. Paket Html juga dapat digunakan untuk mem-parse dan membangun XML. Ini adalah port html5lib dari Python

Dalam tutorial ini, kita akan menggunakan Github untuk mengilustrasikan latihan memo yang menunjukkan fungsionalitas berikut dari paket Html

• Mengurai. mem-parsing HTML ke dalam Dokumen;
• Penyaringan. memilih data yang diinginkan ke dalam Elemen dan melintasinya;
• Mengekstrak. mendapatkan atribut, teks, dan HTML node;
• Memodifikasi. menambahkan, mengedit, menghapus node, dan mengedit atributnya

Tambahkan dependensi Html dan Http di pubspec kami. file yaml

Sekilas tentang paket Http, paket ini menyediakan API berbasis Masa Depan untuk membuat permintaan

Sekarang instal semua paket ini dengan perintah ini

Paket Html tidak memuat halaman HTML, itu adalah tugas paket Http, di sisi lain, ia mulai membangun pohon DOM yang sesuai dengan panggilan ke metode parse. Pohon ini bekerja sama dengan DOM di browser, menawarkan metode yang mirip dengan jQuery dan JavaScript vanilla untuk memilih, menelusuri, memanipulasi teks. HTML. atribut dan penambahan. menghapus elemen

Jika Anda merasa nyaman dengan penyeleksi sisi klien dan traversal DOM. manipulasi, Anda akan menemukan paket Html sangat familiar. Periksa betapa mudahnya mencetak jumlah paragraf pada satu halaman

Perlu diingat bahwa paket Html hanya menginterpretasikan HTML — paket ini tidak menginterpretasikan JavaScript. Oleh karena itu, perubahan pada DOM yang biasanya terjadi setelah halaman dimuat di browser yang mengaktifkan JavaScript tidak akan terlihat dengan paket Html

Tahap penguraian HTML menjadi Dokumen. paket Html menjamin penguraian HTML apa pun, dari yang paling tidak valid hingga yang benar-benar tervalidasi, seperti yang dilakukan browser modern

Mari parsing isi respons dan dapatkan dokumen. Perhatikan bahwa isi respons berasal dari halaman Github saya

Sekarang kita telah mengonversi kode HTML menjadi dokumen, saatnya untuk menelusurinya dan menemukan apa yang kita cari. Di sinilah kemiripannya dengan jQuery / JavaScript paling terlihat karena penyeleksi dan metode perpindahannya serupa. Mari kita lihat beberapa filter paling berguna di bawah ini

4. 1. Memilih

Semua metode pemilihan dokumen menerima string yang mewakili pemilih, menggunakan sintaks pemilih yang sama seperti di CSS atau JavaScript, dan mengambil daftar elemen yang sesuai. Daftar ini boleh kosong tetapi tidak nol

Mari kita lihat beberapa metode seleksi

Anda selalu dapat menggunakan metode yang lebih eksplisit yang terinspirasi oleh DOM browser
Bahkan jika kelas Elemen bukan superkelas Dokumen, kelas Elemen dan Dokumen memiliki metode yang hampir sama, Anda dapat mempelajari lebih lanjut tentang penggunaan metode pemilihan di referensi API

4. 2. Melintasi

Melintasi berarti menavigasi melintasi pohon DOM. paket Html menyediakan metode yang beroperasi pada Dokumen, pada sekumpulan Elemen, atau pada Elemen tertentu, memungkinkan Anda untuk menavigasi ke induk atau turunan node

Juga, Anda dapat melompat ke Elemen pertama, terakhir, dan ke-n (menggunakan indeks berbasis 0) dalam satu set Elemen

Kami sekarang tahu cara menjangkau elemen tertentu, jadi inilah saatnya untuk mendapatkan kontennya, yaitu atribut, HTML, atau teks turunannya

Lihatlah contoh ini yang memilih nama saya di halaman Github

Berikut adalah beberapa tip yang perlu diingat saat memilih dan menggunakan penyeleksi

• Mengandalkan fitur "Lihat Sumber" browser Anda dan tidak hanya pada halaman DOM karena mungkin telah berubah (memilih di konsol browser mungkin memberikan hasil yang berbeda dari paket Html)
• Kenali penyeleksi Anda karena jumlahnya banyak dan selalu baik untuk setidaknya pernah melihatnya sebelumnya;
• Kurang bergantung pada perubahan halaman. bertujuan untuk penyeleksi terkecil dan paling tidak berkompromi (mis. g. lebih suka id. berdasarkan)

Pengeditan termasuk mendefinisikan atribut, teks, dan HTML untuk elemen, serta menambahkan dan menghapus elemen. Ini dilakukan pada pohon DOM yang sebelumnya dibuat oleh paket Html — Document

6. 1. Tambahkan Elemen ke DOM

Bahkan jika paket Html tidak menyediakan metode untuk melakukan modifikasi secara langsung, Anda dapat memodifikasinya dengan melakukan ini

6. 2. Menghapus Elemen

Untuk menghapus item, Anda harus terlebih dahulu memilihnya dan menjalankan metode remove()

6. 3. Mengonversi Dokumen yang Dimodifikasi ke HTML

Terakhir, karena kami mengubah Dokumen, kami mungkin ingin memeriksa pekerjaan kami

Untuk melakukan ini, kita dapat menjelajahi pohon DOM Dokumen dengan memilih, menelusuri, dan mengekstrak menggunakan metode yang disajikan, atau kita dapat mengekstrak HTML-nya sebagai String menggunakan atribut outerHtml dari sebuah Dokumen

Apakah Dart dapat digunakan untuk situs web?

Bagaimana cara mem-parsing HTML di Dart?

Bagaimana cara mengonversi kode HTML ke Flutter?

Bagaimana cara menggunakan Dart dalam pengembangan web?