HTML Document Object Model and Dart Programming

We all know that dart is a type of javascript. So we can manipulate data inside HTML pages with the help of dart in a similar fashion as we can do with javascript. In HTML DOM (Document Object Model) every webpage is on a window, so it is considered as an object. The hierarchical model that follows is as follows:

Dart provides the user to manipulate these elements in an HTML page with the help of

dart:html

library. To use a dart program inside HTML you have to import this library in your code.

Syntax:

import 'dart:html';

To access the elements inside the page we make use of

query selector function

to manipulate the element.

Syntax:

Element querySelector(String selectors);

The String selector can be either class name (.class_name), id (#id), html element (h1, p, ...), attribute type (input[type="button"], ...) or either asterisk (*).

There are two ways to use practice dart in your webpage:

1. Online on Dartpad.
2. In your system.

For the first one, you don't have to install dart in your system.

Steps:

1. Open Dartpad in new window.
2. 👁 Image
   
3. Now click on newpad button.
4. 👁 Image
   
5. Select Dart language and also enable Html button and hit the create button.
6. 👁 Image
   

In this way, you will get the place to work on the dart and embed it with an HTML page. The other way to do so requires dart-SDK inside your system.

To do so you can follow this

.

Example 1: Creating a simple dart-Html page.

Output:

The output screen looks like:

Understanding the control flow:

Example 2: Creating a string concatenation program.

When You hit the concat button then the below text is generated dynamically by concatenation of above strings.