文档章节

Dart语言【009】DOM 操作

风华神使
 风华神使
发布于 2015/05/29 21:02
字数 585
阅读 82
收藏 0

一、什么是DOM

DOM是文档对象模型(Document Object Model)的简称。

在这个模型中,用一个有若干结点的树来表示一个web页面。将<html>视为根结点,如果<x>中有<y>,则将<y>视为<x>的子结点。

上图中,body中有<div>,<div>中有<ul>,而<ul>中又有4个<li>,那么我们可以把它看作一个树:

html为根结点,它有子结点head和body,而body又有子节点h1、div、script……

官网提供的图片很好地解释了这种对应关系:

The DOM tree for a simple HTML file


二、一个示例

Dart的DOM API函数是按照“如果从头设计DOM API那么它应该是什么样子”来设计的,但Dart也保留了JavaScript风格的DOM API。

要使用DOM API,须导入html库。

import 'dart:html';

下面的代码展示了将一个input的内容进行更改。

HTML部分:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Dom</title>

    <link rel="stylesheet" href="dom.css">

    <script type="application/dart" src="dom.dart">
    </script>
    <script src="packages/browser/dart.js"></script>
</head>
<body>
    <p><input id="txt0" type="text" /></p>
    <br />
    <p><button id="btn0">按钮</button></p>
</body>
</html>

Dart部分:

import 'dart:html';

void main() {
  Element btn0 = querySelector('#btn0');
  btn0.onClick.listen(writeText);
}

void writeText(MouseEvent event) {
  Element txt0 = querySelector('#txt0');
  (txt0 as TextInputElement).value = "Dart DOM API";
}

函数querySelector的作用是根据ID获取元素,参数为要获取的元素的ID,返回值为获取到的元素。如果要获取ID为"id1"的元素,则

Element ele = querySelector('#id1'); // 不要把 # 漏了!

获取到了ID为btn0的按钮之后,为这个按钮的单击事件(onClick)添加一个响应函数writeText,这个按钮一旦被单击,writeText函数就会执行。而writeText函数的作用是先获取ID为txt0的输入框,然后将其文本改为"Dart DOM API"。

效果如下:


三、Dart的DOM API函数

querySelectorAll也是一个非常重要的函数。它的模样是:

ElementList<Element> querySelectorAll(String selectors) {
  // ... 
}

它可以获取一系列的元素。例如,我要获取页面上所有的div,可以

ElementList<Element> divs = querySelectorAll("div");

也可以根据CSS类选择器来获取元素。例如

.class1 {
  color: #F8F8F8;
}

那么,querySelectorAll(".class1");得到的便是所有class="class1"的元素。


当然,要想熟悉Dart DOM API,只有这点内容是完全不够的。重要的是多看Dart的文档。

https://www.dartlang.org/docs/tutorials/connect-dart-html/

© 著作权归作者所有

共有 人打赏支持
风华神使
粉丝 28
博文 80
码字总数 45544
作品 0
南开
架构师
私信 提问
Angular 2 的 Dart 实现--AngularDart

AngularDart最初是Angular开发团队拆分出来的一个子项目,AngularDart中保留了Angular的核心特性如指令、数据绑定和依赖注入,利用了Dart的元数据、类型、类等特性,还采纳了新兴的Web标准如...

匿名
2016/07/21
1K
0
最火移动端跨平台方案盘点:React Native、weex、Flutter

1、前言 跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头。 为什么我们需要跨平台开发? ...

JackJiang2011
2018/08/13
0
0
Dart 比 JavaScript 更酷的10个理由

Dart 是 Google发明的一种新的编程语言。在使用JavaScript一年多以后,我对Dart可谓是一见钟情。我以前是做Java的,我在用JS的时候要学习很多新东西。 有人说你必须深入研究JavaScript,否则...

虫虫
2012/01/04
7.3K
13
Dart 比 JavaScript 更酷的10个理由

Dart 是 Google发明的一种新的编程语言。在使用JavaScript一年多以后,我对Dart可谓是一见钟情。我以前是做Java的,我在用JS的时候要学习很多新东西。 有人说你必须深入研究JavaScript,否则...

彭博
2012/11/28
313
2
Dart 1.12 RC0 发布,新增 null-aware 操作符

Dart 1.12 RC0 发布,此版本新增了大量 null-aware 操作符语言特想,改进了 pub,Observatory,dartdoc,dartfmt 等功能。详细改进请看发行说明。 null-aware 操作符语言特性: `??`: if nul...

oschina
2015/08/31
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

spring aop学习

1.aop和spring aop的关系? aop是一种思想,spring aop是aop的一种实现。 2.Spring aop和AspectJ的关系? 这两种都是实现aop的,spring借助AspectJ的语法实现aop的功能 3.@AspectJ support和...

llsydn
39分钟前
3
0
OSChina 周六乱弹 —— 世界的源代码

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @小鱼丁 :#今日歌曲推荐# 分享Jason Mraz的单曲《Prettiest Friend (Demo)》: 《Prettiest Friend (Demo)》- Jason Mraz 手机党少年们想听歌...

小小编辑
今天
221
9
java框架学习日志-13(Mybatis基本概念和简单的例子)

在mybatis初次学习Mybatis的时候,遇到了很多问题,虽然阿里云的视频有教学,但是视频教学所使用的软件和我自己使用的软件不用,我自己用的数据库是oracle数据库,开发环境是idea。而且视频中...

白话
今天
14
0
Java基础:String、StringBuffer和StringBuilder的区别

1 String String:字符串常量,字符串长度不可变。Java中String是immutable(不可变)的。 String类的包含如下定义: /** The value is used for character storage. */private final cha...

watermelon11
今天
6
0
mogodb服务

部署MongoDB 官网: https://www.mongodb.com/download-center/community 创建mongo数据目录 mkdir /data/mongodb 二进制部署 wget -c https://fastdl.mongodb.org/linux/mongodb-linux-x8......

以谁为师
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部