Dart语言教程：HTML DOM

2019-06-2217:46:54编程语言入门到精通Comments7,452 views字数 3105阅读模式

每个网页都位于浏览器窗口内，可以将其视为对象。Document对象表示在该窗口中显示的HTML文档。Document对象具有各种属性，这些属性引用允许访问和修改文档内容的其他对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

访问和修改文档内容的方式称为文档对象模型或DOM。对象按层次结构组织，此分层结构适用于Web文档中对象的组织。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

窗口 - 层次结构的顶部，它是对象层次结构的最外层元素。
文档 - 加载到窗口中的每个HTML文档都成为文档对象，该文档包含页面的内容。
元素 - 表示网页上的内容。包括文本框，页面标题等。
节点 - 通常是元素，但它们也可以是属性，文本，注释和其他DOM类型。

下面是一些重要DOM对象的简单层次结构 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

Dart提供了dart:html库来操作DOM中的对象和元素。基于控制台的应用程序无法使用dart:html库。要在Web应用程序中使用HTML库，请导入dart:html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

import 'dart:html';

继续，将在下一节讨论一些DOM操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

查找DOM元素

dart:html库提供querySelector函数来搜索DOM中的元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

Element querySelector(String selectors);

querySelector()函数返回与指定的选择器组匹配的第一个元素。“选择器应该是使用CSS选择器语法的字符串，如下所示 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

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

示例：操作DOM文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

按照下面给出的步骤，在Webstorm IDE中 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

第1步 - 文件 NewProject → Location，项目名称：DemoWebApp 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

第2步 - 在“生成示例内容”部分中，选择：SimpleWebApplication。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

它将创建一个示例项目DemoWebApp，有一个pubspec.yaml文件，其中包含需要下载的依赖项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

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

#author: Your Name <email@example.com> 
#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

如果已连接到Web网络，那么这些将自动下载，也可以右键单击pubspec.yaml 并获取依赖项。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

在Web文件夹中，将找到三个文件：Index.html，main.dart和style.css，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

文件：index.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

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

运行index.html 文件，将在屏幕上看到以下输出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

事件处理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

dart:html库为DOM Elements提供onClick事件，下面是如何处理单击事件流显示元素的语法 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

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

querySelector()函数返回给定DOM中的元素，onClick.listen()将获取一个eventHandler方法，该方法将在引发click事件时调用。eventHandler的语法如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

void eventHanlderFunction (MouseEvent event){ }

下面举个例子来理解Dart中事件处理的概念。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

文件：TestEvent.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

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

执行上面示例代码，得到以下结果 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

原文出自【易百教程】，商业转载请联系作者获得授权，非商业转载请保留原文链接：https://www.yiibai.com/dart/dart_programming_html_dom.html#article-start文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/13776.html

Dart语言教程：HTML DOM

查找DOM元素

TIOBE4月编程语言排行榜：PHP排名跌至历史最低

深入探索Python内存回收机制：原理与实践

TIOBE2024 年 3 月编程语言排行榜，Python 遥遥领先

三元运算符是什么？为啥Python、Go 和 Rust 都不支持？

Python处理日期和时间的基础教程

替代for循环，让Python代码更pythonic !

Python 3.13新型JIT有哪些好处？

Python 3.13 计划将CPython 的性能提升五倍！

Python3.12的加速与JIT解读

Python 3.12 正式版整体性能提升了约 5％，带来多项增强

Comment