Dart HTML DOM

2025年3月17日 | 阅读 3 分钟

每个网页都可以被视为一个对象，它存在于浏览器窗口中。我们可以使用网络浏览器访问网页，并且需要连接到互联网。DOM是文档对象模型的缩写。Document对象表示在该窗口中显示的HTML文档。文档对象模型由几个属性组成，这些属性引用其他对象，这些对象提供了修改文档内容的功能。

访问文档内容的过程称为文档对象模型，或DOM。这些对象以层次结构组织。层次结构用于组织web文档中的对象。

窗口 - 它在层次结构中是第一个。它是对象层次结构的最外层元素。
文档 - 当HTML文档加载到窗口中时，它就成为一个窗口对象。文档包括页面的内容。
元素 - 它表示网页上的内容。例如 - 标题，文本框等。
节点 - 这些通常是元素，但它们也可以是属性、注释、文本和其他DOM类型。

以下是几个重要的DOM对象的层次结构。

我们可以使用dart:html库来操作DOM中的对象和元素。基于控制台的应用程序不能使用dart:html库。要在Web应用程序中使用HTML库，我们需要导入dart:html。

让我们在以下部分了解DOM操作。

查找DOM元素

一个文档可以包含许多属性，有时我们需要搜索特定的属性。dart:html库提供了querySelector函数来搜索DOM中的元素。

querySelector()函数返回与指定的选择器组匹配的第一个元素。让我们了解一下。

以下语法。

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

让我们理解下面的例子。

示例 -

我们创建一个HTML文件名index.html，并创建一个dart文件。

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

事件处理

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

querySelector()函数从给定的DOM返回元素，而onClick.listen()将采用一个eventHandler方法，当触发点击事件时，该方法将被调用。eventHandler的语法如下？

现在让我们举一个例子来理解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>

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

下一主题#

Dart HTML DOM

查找DOM元素

示例 -

Main.dart

事件处理

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Dart 教程

Dart 数据类型

控制流语句

Dart 函数

面向对象

Dart 高级主题

Dart HTML DOM

查找DOM元素

示例 -

Main.dart

事件处理

相关帖子

Dart Typedef

Dart 泛型

Dart Async

Dart Metadata

Dart Isolates

Dart Generators

Dart 包

Dart 库

Dart 单元测试

Dart 集合

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器