每个网页都位于浏览器窗口内，可以将其视为对象。Document对象表示在该窗口中显示的HTML文档。Document对象具有各种属性，这些属性引用允许访问和修改文档内容的其他对象。
访问和修改文档内容的方式称为文档对象模型或DOM。对象按层次结构组织，此分层结构适用于Web文档中对象的组织。
- 窗口 - 层次结构的顶部，它是对象层次结构的最外层元素。
- 文档 - 加载到窗口中的每个HTML文档都成为文档对象，该文档包含页面的内容。
- 元素 - 表示网页上的内容。包括文本框，页面标题等。
- 节点 - 通常是元素，但它们也可以是属性，文本，注释和其他DOM类型。
下面是一些重要DOM对象的简单层次结构 -
Dart提供了dart:html库来操作DOM中的对象和元素。基于控制台的应用程序无法使用dart:html库。要在Web应用程序中使用HTML库，请导入dart:html -
import 'dart:html';
Dart
继续，将在下一节讨论一些DOM操作。
查找DOM元素
dart:html库提供querySelector函数来搜索DOM中的元素。
Element querySelector(String selectors);
Dart
querySelector()函数返回与指定的选择器组匹配的第一个元素。“选择器应该是使用CSS选择器语法的字符串，如下所示 -
var element1 = document.querySelector('.className');
var element2 = document.querySelector('#id');
Dart
示例：操作DOM
按照下面给出的步骤，在Webstorm IDE中 -
第1步 - 文件 NewProject → Location，项目名称：DemoWebApp 。
第2步 - 在“生成示例内容”部分中，选择：SimpleWebApplication。
它将创建一个示例项目DemoWebApp，有一个pubspec.yaml文件，其中包含需要下载的依赖项。
name: 'DemoWebApp'
version: 0.0.1
description: An absolute bare-bones web app.
#author: Your Name
#homepage: https://www.example.com
environment:
sdk: '>=1.0.0 =0.10.0
