文档对象代表该窗口中显示的HTML文档， Document对象具有引用其他对象的各种属性，这些属性允许访问和修改文档内容。
文档内容的访问和修改方式称为文档对象模型或 DOM ，对象按层次结构组织，此层次结构适用于Web文档中对象的组织。
Window - 层次结构的顶部，它是对象层次结构的最外层元素。
Document - 每个加载到窗口中的HTML文档都成为一个文档对象，该文档包含页面的内容。
Elements - 表示网页上的内容，示例包括文本框，页面标题等。
Nodes - 通常是元素，但它们也可以是属性，文本，注释和其他DOM类型。
这是一些重要的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 。
步骤2 - 在"Generate sample content"部分中，选择 SimpleWebApplication 。
它将创建一个示例项目 DemoWebApp ，有一个 pubspec.yaml 文件，其中包含需要下载的依赖项。
name: 'DemoWebApp' version: 0.0.1 description: An absolute bare-bones web app. #author: Your Name <[email protected]> #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 文件，您将在屏幕上看到以下输出。
事件处理
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;
}
输出
参考链接
https://www.learnfk.com/dart-programming/dart-programming-html-dom.html
标签：DOM,DemoWebApp,无涯,html,dart,HTML,文档,querySelector From： https://blog.51cto.com/u_14033984/8347019