Dart - HTML DOM

Dart - HTML DOM 首页 / Dart入门教程 / Dart - HTML DOM

文档对象代表该窗口中显示的HTML文档, Document对象具有引用其他对象的各种属性,这些属性允许访问和修改文档内容。

文档内容的访问和修改方式称为文档对象模型或 DOM ,对象按层次结构组织,此层次结构适用于Web文档中对象的组织。

  • Window      - 层次结构的顶部,它是对象层次结构的最外层元素。

  • Document  - 每个加载到窗口中的HTML文档都成为一个文档对象,该文档包含页面的内容。

  • Elements    - 表示网页上的内容,示例包括文本框,页面标题等。

  • Nodes         - 通常是元素,但它们也可以是属性,文本,注释和其他DOM类型。

这是一些重要的DOM对象的简单层次结构-

HTML DOM

Dart提供了 dart:html 库来处理DOM中的对象和元素,基于控制台的应用程序不能使用 dart:html 库,要在Web应用程序中使用HTML库,请导入 dart:html -

import 'dart:html';

接下来,我们将在下一部分中讨论 DOM操作。

查找DOM元素

dart:html 库提供了 querySelector 函数来搜索DOM中的元素。

Element querySelector(String selectors);

querySelector()函数返回与指定选择器组匹配的第一个元素。 选择器应该是使用CSSselector语法的字符串,如下所示

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

操纵DOM

在Webstorm IDE中执行以下步骤-

步骤1 - File NewProject→Location,提供项目名称为 DemoWebApp 。

Demowebapp

步骤2   -  在"Generate sample content"部分中,选择 SimpleWebApplication 。

Create

它将创建一个示例项目 DemoWebApp ,有一个 pubspec.yaml 文件,其中包含需要下载的依赖项。

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

#author: Your Name <email@example.com> 
#homepage: https://www.learnfk.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 

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!!!.'; 
} 

运行 index.html 文件,您将在屏幕上看到以下输出。

Demo Web App

事件处理

dart:html 库为DOM Elements提供了 onClick 事件。语法显示元素如何处理点击事件流。

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

querySelector()函数从给定的DOM返回元素,并且 onClick.listen()将采用 eventHandler 方法,当点击事件引发, eventHandler 的语法如下:

void eventHanlderFunction (MouseEvent event){ } 

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

输出

输出

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

AI技术内参 -〔洪亮劼〕

趣谈网络协议 -〔刘超〕

玩转Spring全家桶 -〔丁雪丰〕

编辑训练营 -〔总编室〕

Swift核心技术与实战 -〔张杰〕

代码之丑 -〔郑晔〕

陶辉的网络协议集训班02期 -〔陶辉〕

Web 3.0入局攻略 -〔郭大治〕

结构思考力 · 透过结构看思考 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)