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. Now click on newpad button.
  3. 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.

HTML


We will be linking dart and css files with our HTML page. Apart from that we also have to link dart javascript so that it may convert dart file to browser understandable javascript.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Dart


This is main.dart

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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!";
}

chevron_right


CSS


This is styles.css

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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;
}

chevron_right



Output:
The output screen looks like:

Understanding the control flow:

Example 2: Creating a string concation program.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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: <input type = "text" id = "first_name">
       <br><br>
       Enter Second String:  <input type = "text" id = "second_name">
       <br><br>
       Enter Third String:  <input type = "text" id = "third_name">
       <br><br>
       <input type = "button" id = "concat" value="Concat">
     </div>
     <h3 id="output"></h3>
  </body>
</html>

chevron_right


Dart


This is main.dart

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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;
}

chevron_right


CSS


This is styles.css

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
}

chevron_right



Output:

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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.