Dart HTML DOM
Each and every webpage is an object that resides within a browser window. With a web browser, we can view the webpage, but an internet connection is required. The Document Object Model is abbreviated as DOM. The HTML document that is visible in that window is indicated by a Document object. The ability to change the content of a document is provided by the many attributes that make reference to other objects inside the document object model.
The Document Object Model, or DOM, is the method by which a document’s content is accessed. A hierarchy governs the arrangement of the Objects. The objects of a web document are arranged using a hierarchical structure.
- Window: In the hierarchy, it is the first. In the object hierarchy, it is the outermost element.
- Document: An HTML document becomes a window object when it loads into a window. The page’s contents are included in the document.
- Elements: It indicates the information on the page. Consider the title, text box, etc.
- Nodes: Although they are frequently elements, they can also be attributes, text, comments, or other DOM types.
The structure of the few significant DOM objects is shown below.
The dart:html library lets us work with the elements and objects in the DOM. Applications running on consoles are unable to use the dart:html library. Importing dart:html is necessary in order to work with the HTML library in the web application.
import 'dart.html';
Finding DOM Elements
Many attributes may be present in a document at times, necessitating a specific attribute search. The querySelector function to search elements in the DOM is provided by the dart:html package.
Element querySelector(String selector);
The first element that matches the designated group of the selector is returned by the querySelector() function. Let’s comprehend the.
observing syntax.
var element1 = document.querySelector('.className');
var element2 = document.querySelector('#id');
Example
Both a dart file and an HTML file with the name index.html are created.
<!DOCTYPE html>
<html>
<head>
<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>
<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>
<div id = "output"></div>
</h1>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Main.dart
import 'dart:html';
void main() {
querySelector('#output').text = 'Your Dart web dom app is running!!!.';
}
Event Handling
DOM Elements can use the onClick event thanks to the dart:html library. An element might handle a stream of click events, as seen by the syntax.
querySelector('#Id').onClick.listen(eventHanlderFunction);
The querySelector() function returns the element from the given DOM and onClick.listen() will take an eventHandler method which will be invoked when a click event is raised. The syntax of eventHandler is given below ?
void eventHanlderFunction (MouseEvent event){ }
Now, let’s look at an example to better grasp the idea of Dart event handling.
TestEvent.html
<!DOCTYPE html>
<html>
<head>
<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>
<link rel = "stylesheet" href = "styles.css">
<script defer src = "TestEvent.dart" type="application/dart"></script>
<script defer src = "packages/browser/dart.js"></script>
</head>
<body>
<div id = "output"></div>
<h1>
<div>
Enter you name : <input type = "text" id = "txtName">
<input type = "button" id = "btnWish" value="Wish">
</div>
</h1>
<h2 id = "display"></h2>
TestEvent.dart
import 'dart:html';
void main() {
querySelector('#btnWish').onClick.listen(wishHandler);
}
void wishHandler(MouseEvent event){
String name = (querySelector('#txtName') as InputElement).value;
querySelector('#display').text = 'Hello Mr.'+ name;
}
