Dart Programming - HTML DOM-alljchome-开发者的教程家园

Dart Programming Tutorial

Dart Programming Useful Resources

Selected Reading

Dart Programming - HTML DOM

Every webpage resides inside a browser window which can be considered as an object.

A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.

The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure apppes to the organization of objects in a Web document.

Window − Top of the hierarchy. It is the outmost element of the object hierarchy.

Document − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.

Elements − represent the content on a web page. Examples include the text boxes, page title etc.

Nodes − are often elements, but they can also be attributes, text, comments, and other DOM types.

Here is a simple hierarchy of a few important DOM objects −

Dart provides the dart:html pbrary to manipulate objects and elements in the DOM. Console-based apppcations cannot use the dart:html pbrary. To use the HTML pbrary in the web apppcations, import dart:html −

import  dart:html ;

Moving on, we will discuss some DOM Operations in the next section.

Finding DOM Elements

The dart:html pbrary provides the querySelector function to search for elements in the DOM.

Element querySelector(String selectors);

The querySelector() function returns the first element that matches the specified group of selectors. "selectors should be string using CSS selector syntax as given below

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

Example: Manipulating DOM

Follow the steps given below, in the Webstorm IDE −

Step 1 − File NewProject → In the location, provide the project name as DemoWebApp.

Step 1 − In the section "Generate sample content", select SimpleWebApppcation.

It will create a sample project, DemoWebApp. There is a pubspec.yaml file containing the dependencies which need to be downloaded.

name:  DemoWebApp  
version: 0.0.1 
description: An absolute bare-bones web app. 

#author: Your Name <email@example.com> 
#homepage: https://www.example.com  
environment:   
   sdk:  >=1.0.0 <2.0.0   
dependencies:   
   browser:  >=0.10.0 <0.11.0    dart_to_js_script_rewriter:  ^1.0.1   
transformers: 
- dart_to_js_script_rewriter

If you are connected to Web, then these will be downloaded automatically, else you can right-cpck on the pubspec.yaml and get dependencies.

In the web folder, you will find three files: Index.html, main.dart, and style.css

Index.html

<!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>     
      <pnk rel = "stylesheet" href = "styles.css">     
      <script defer src = "main.dart" type = "apppcation/dart"></script>
      <script defer src = "packages/browser/dart.js"></script> 
   </head>
   
   <body>   
      <h1>
         <span id = "output"></span> 
      </h1>  
   </body> 
</html>

Main.dart

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

Run the index.html file; you will see the following output on your screen.

Event Handpng

The dart:html pbrary provides the onCpck event for DOM Elements. The syntax shows how an element could handle a stream of cpck events.

querySelector( #Id ).onCpck.psten(eventHanlderFunction);

The querySelector() function returns the element from the given DOM and onCpck.psten() will take an eventHandler method which will be invoked when a cpck event is raised. The syntax of eventHandler is given below −

void eventHanlderFunction (MouseEvent event){ }

Let us now take an example to understand the concept of Event Handpng in Dart.

TestEvent.html

<!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> 
      <pnk rel = "stylesheet" href = "styles.css"> 
      <script defer src = "TestEvent.dart" type="apppcation/dart"></script> 
      <script defer src = "packages/browser/dart.js"></script> 
   </head> 
   
   <body> 
      <span id = "output"></span> 
      <h1> 
         <span> 
            Enter you name : <input type = "text" id = "txtName"> 
            <input type = "button" id = "btnWish" value="Wish"> 
         </span> 
      </h1> 
      <h2 id = "display"></h2> 
   </body>
   
</html>

TestEvent.dart

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