HTML Document Object Model and Dart Programming
Last Updated :
08 Mar, 2022
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.
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.
<!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>
|
Dart
This is main.dart
import 'dart:html';
void main()
{
var header = querySelector('#header');
header.text = "Geeks For Geeks!";
}
|
CSS
This is styles.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.
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: <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>
|
Dart
This is main.dart
import 'dart:html';
void main()
{
querySelector('#concat').onClick.listen(geeksForGeeks);
}
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;
}
|
CSS
This is styles.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;
}
|
Output:
When You hit the concat button then the below text is generated dynamically by concatenation of above strings.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...