HTML Document Object Model and Dart Programming

Last Updated : 24 Jun, 2024

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:

Online on Dartpad.
In your system.

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

Steps:

Open Dartpad in new window.
Now click on newpad button.
Select Dart language and also enable Html button and hit the create button.

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

website

Example 1: Creating a simple dart-Html page.

Dart

// Importing dart HTML library
import 'dart:html';

void main()
{
    // Calling the element with id header and setting its value dynamically
    var header = querySelector('#header');
    header.text = "Geeks For Geeks!";
}

HTML

<!DOCTYPE html>   
<html> 
   <head>
      <title>Geeks for Geeks</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 id="header"></h1>
  </body>
</html>

CSS

 // Setting CSS style
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
}

h1 {
  color: ForestGreen;
  font-family: Arial, Helvetica, sans-serif;
}

Output:

The output screen looks like:

Understanding the control flow:

Example 2: Creating a string concatenation program.

Dart

// Importing dart HTML library
import 'dart:html';

void main()
{
    // This statement will call geeksForGeeks function when concat
    // button is clicked...
    querySelector('#concat').onClick.listen(geeksForGeeks);
}

// Function taking all the three strings,
// concating them and displaying inside h3 tag...
void geeksForGeeks(MouseEvent e)
{
    String s1 = (querySelector('#first_name') as InputElement).value;
    String s2 = (querySelector('#second_name') as InputElement).value;
    String s3 = (querySelector('#third_name') as InputElement).value;

    querySelector('#output').text = s1 + ' ' + s2 + ' ' + s3;
}

HTML

<!DOCTYPE html>   
<html> 
   <head>
      <title>Geeks for Geeks</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>Geeks For Geeks</h1>
     <div class="gfg">
       Enter First String:&nbsp<input type = "text" id = "first_name">
       <br><br>
       Enter Second String:&nbsp <input type = "text" id = "second_name">
       <br><br>
       Enter Third String:&nbsp <input type = "text" id = "third_name">
       <br><br>
       <input type = "button" id = "concat" value="Concat">
     </div>
     <h3 id="output"></h3>
  </body>
</html>

CSS

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
}

h1 {
  color: ForestGreen;
  font-family: Arial, Helvetica, sans-serif;
}

.gfg {
  color: red;
  font-family: Arial, Helvetica, sans-serif;
}

#output{
  background-color: pink;
  color: Red;
}