Rate this post

Mọi trang web có thể được coi là đối tượng và nó tồn tại bên trong cửa sổ trình duyệt. Chúng tôi có thể truy cập trang web bằng trình duyệt web và nó cần được kết nối với internet. DOM là từ viết tắt của Document object model. Đối tượng Document biểu thị tài liệu HTML được hiển thị trong cửa sổ đó. Mô hình đối tượng tài liệu bao gồm một số thuộc tính tham chiếu đến các đối tượng khác cung cấp cơ sở để sửa đổi nội dung tài liệu.

Các bài viết liên quan:

Quá trình mà nội dung của tài liệu được truy cập được gọi là Mô hình Đối tượng Tài liệu, hoặc DOM. Các đối tượng được tổ chức theo một hệ thống phân cấp. Cấu trúc phân cấp sử dụng để tổ chức các đối tượng trong tài liệu web.

Window – Đây là cửa sổ đầu tiên trong hệ thống phân cấp. Nó là phần tử ngoài cùng của hệ thống phân cấp đối tượng.
Document – Khi một tài liệu HTML tải vào một cửa sổ mà nó trở thành một đối tượng cửa sổ. Tài liệu bao gồm nội dung của trang.
Elements – Nó biểu thị nội dung trên trang web. Ví dụ – Tiêu đề, hộp văn bản, v.v.
Nodes – Đây thường là các phần tử, nhưng chúng cũng là thuộc tính, nhận xét, văn bản và các loại DOM khác.

Dưới đây là phân cấp của một số đối tượng DOM quan trọng.

Chúng ta có thể thao tác các đối tượng và phần tử trong DOM bằng cách sử dụng thư viện dart: html . Ứng dụng dựa trên bảng điều khiển không thể sử dụng thư viện dart: html . Để làm việc với thư viện HTML trong ứng dụng web, chúng tôi cần nhập dart: html.

import 'dart.html';

Hãy hiểu hoạt động của DOM trong phần sau.

Tìm các phần tử DOM

Một tài liệu có thể chứa nhiều thuộc tính mà đôi khi chúng ta cần tìm kiếm thuộc tính cụ thể. Thư viện dart: html cung cấp hàm querySelector để tìm kiếm phần tử trong DOM.

Element querySelector(String selector);

Hàm querySelector () trả về phần tử đầu tiên phù hợp với nhóm cụ thể của bộ chọn. Hãy hiểu.

cú pháp sau.

var element1 = document.querySelector('.className');   
var element2 = document.querySelector('#id');

Hãy hiểu ví dụ sau.

Ví dụ:

Chúng tôi tạo một tệp HTML tên index.html và cũng tạo một tệp Dart.

<!DOCTYPE html>     
<html>   
   <head>       
      <meta charset = "utf-8">       
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">       
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">  
      <meta name = "scaffolded-by" content = "https://github.com/google/stagehand">  
      <title>DemoWebApp</title>       
      <link rel = "stylesheet" href = "styles.css">       
      <script defer src = "main.dart" type = "application/dart"></script>  
      <script defer src = "packages/browser/dart.js"></script>   
   </head>  
     
   <body>     
      <h1>  
         <div id = "output"></div>   
      </h1>    
   </body>   
</html>

Main.dart

import 'dart:html';    
void main() {     
   querySelector('#output').text = 'Your Dart web dom app is running!!!.';   
}

Xử lý sự kiện

Thư viện dart: html cung cấp sự kiện onClick cho Phần tử DOM. Cú pháp cho biết cách một phần tử có thể xử lý luồng sự kiện nhấp chuột.

querySelector('#Id').onClick.listen(eventHanlderFunction);

Hàm querySelector () trả về phần tử từ DOM đã cho và onClick.listen () sẽ nhận một phương thức eventHandler sẽ được gọi khi một sự kiện nhấp chuột được đưa ra. Cú pháp của eventHandler được đưa ra dưới đây?

void eventHanlderFunction (MouseEvent event){ }

Bây giờ chúng ta hãy lấy một ví dụ để hiểu khái niệm Xử lý sự kiện trong Dart.

<!DOCTYPE html>   
<html>   
   <head>   
      <meta charset = "utf-8">   
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">   
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">   
      <meta name = "scaffolded-by" content ="https://github.com/google/stagehand">   
      <title>DemoWebApp</title>   
      <link rel = "stylesheet" href = "styles.css">   
      <script defer src = "TestEvent.dart" type="application/dart"></script>   
      <script defer src = "packages/browser/dart.js"></script>   
   </head>  
   <body>   
      <div id = "output"></div>   
      <h1>   
         <div>   
            Enter you name : <input type = "text" id = "txtName">   
            <input type = "button" id = "btnWish" value="Wish">   
         </div>   
      </h1>   
      <h2 id = "display"></h2>  
  </body>
</html>

import 'dart:html';   
void main() {   
   querySelector('#btnWish').onClick.listen(wishHandler);   
}    
void wishHandler(MouseEvent event){   
   String name = (querySelector('#txtName')  as InputElement).value;   
   querySelector('#display').text = 'Hello Mr.'+ name;   
}

Lập trình Flutter

HTML DOM trong Dart

Tìm các phần tử DOM

Xử lý sự kiện

Trả lời Hủy