Programación Dart - HTML DOM

Cada página web reside dentro de una ventana del navegador que puede considerarse un objeto.

UN Document objectrepresenta el documento HTML que se muestra en esa ventana. El objeto Documento tiene varias propiedades que hacen referencia a otros objetos que permiten el acceso y la modificación del contenido del documento.

La forma en que se accede al contenido de un documento y se modifica se denomina Document Object Modelo DOM. Los Objetos están organizados en una jerarquía. Esta estructura jerárquica se aplica a la organización de objetos en un documento web.

Window- Top de la jerarquía. Es el elemento más externo de la jerarquía de objetos.
Document- Cada documento HTML que se carga en una ventana se convierte en un objeto de documento. El documento contiene el contenido de la página.
Elements- representar el contenido de una página web. Los ejemplos incluyen los cuadros de texto, el título de la página, etc.
Nodes - suelen ser elementos, pero también pueden ser atributos, texto, comentarios y otros tipos de DOM.

Aquí hay una jerarquía simple de algunos objetos DOM importantes:

Dart proporciona el dart:htmlbiblioteca para manipular objetos y elementos en el DOM. Las aplicaciones basadas en consola no pueden utilizardart:htmlbiblioteca. Para utilizar la biblioteca HTML en las aplicaciones web, importedart:html -

import 'dart:html';

Continuando, discutiremos algunos DOM Operations en la siguiente sección.

Encontrar elementos DOM

los dart:html biblioteca proporciona el querySelector función para buscar elementos en el DOM.

Element querySelector(String selectors);

los querySelector() La función devuelve el primer elemento que coincide con el grupo especificado de selectores. "selectors debe ser una cadena con la sintaxis del selector CSS como se indica a continuación

var element1 = document.querySelector('.className'); 
var element2 = document.querySelector('#id');

Ejemplo: manipular DOM

Siga los pasos que se indican a continuación, en el IDE de Webstorm:

Step 1 - Archivo NewProject → En la ubicación, proporcione el nombre del proyecto como DemoWebApp.

Step 1 - En la sección "Generar contenido de muestra", seleccione SimpleWebApplication.

Creará un proyecto de muestra, DemoWebApp. Hay unpubspec.yaml archivo que contiene las dependencias que deben descargarse.

name: 'DemoWebApp' 
version: 0.0.1 
description: An absolute bare-bones web app. 

#author: Your Name <[email protected]> 
#homepage: https://www.example.com  
environment:   
   sdk: '>=1.0.0 <2.0.0'  
dependencies:   
   browser: '>=0.10.0 <0.11.0'   dart_to_js_script_rewriter: '^1.0.1'  
transformers: 
- dart_to_js_script_rewriter

Si está conectado a la Web, estos se descargarán automáticamente; de lo contrario, puede hacer clic con el botón derecho en el pubspec.yaml y obtener dependencias.

En la carpeta web, encontrará tres archivos: Index.html, main.darty style.css

Index.html

<!DOCTYPE html>   
<html> 
   <head>     
      <meta charset = "utf-8">     
      <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>  
   </body> 
</html>

Main.dart

import 'dart:html';  
void main() {   
   querySelector('#output').text = 'Your Dart web dom app is running!!!.'; 
}

Ejecutar el index.htmlarchivo; verá el siguiente resultado en su pantalla.

Manejo de eventos

los dart:html biblioteca proporciona el onClickevento para elementos DOM. La sintaxis muestra cómo un elemento podría manejar una secuencia de eventos de clic.

querySelector('#Id').onClick.listen(eventHanlderFunction);

los querySelector() La función devuelve el elemento del DOM dado y onClick.listen() tomará un eventHandlermétodo que se invocará cuando se genere un evento de clic. La sintaxis deeventHandler se da a continuación -

void eventHanlderFunction (MouseEvent event){ }

Tomemos ahora un ejemplo para comprender el concepto de manejo de eventos en Dart.

TestEvent.html

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "utf-8"> 
      <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> 
   </body>
   
</html>

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

Salida

↰ Previous page