介绍虽然dart既可以作为client，也可以作为server，但基本上dart还是作为flutter开发的基础语言。除了andorid和ios，web是最常见最常见的平台，dart也提供了对HTML的原生支持，就是dart:html包。dart:html提供了对DOM对象的各种有用操作和对??HTML5API的支持。这样我们就可以直接使用dart来操作HTML了。除了DOM，dart:html还可以对css进行操作，使用dart:html也很简单：import'dart:html';DOM操作对于DOM操作，首先需要找到这个元素。Dart提供了querySelector()和querySelectorAll()方法，可以根据ID、类、标签、名称或这些元素的集合进行搜索。两者都是查询方法。两者的区别在于querySelector只返回找到的第一个元素，而querySelectorAll返回找到的所有元素。所以querySelector返回一个Element，querySelectorAll返回一个集合List。元素idElement=querySelector('#someId')!;ElementclassElement=querySelector('.some-class')!;ListdivElements=querySelectorAll('div');ListtextInputElements=querySelectorAll('input[type="text"]',);ListspecialElement=querySelectorAll('#someIddiv.class');以上是我们在DOM中查找元素的操作。一旦找到，就可以操纵这些元素。Dart使用Element来表示DOM中的元素。对于每个Element，都有classes、hidden、id、style、title等属性。如果Element中没有需要设置的属性，可以使用attributes，如下：elem.attributes['someAttribute']='someValue';当然，对应一些特殊的Element，也会有对应的Element的子类与之绑定。比如一个a标签，如下：Detailsa标签对应dart中的AnchorElement元素。如果你想改变a标签的href值，你可以这样做：varanchor=querySelector('#name')asAnchorElement;anchor.href='http://www.flydean.com';也可以添加、替换或删除对应的Node：querySelector('#id')!.nodes.add(elem);querySelector('#id')!.replaceWith(elem);querySelector('#id')?。消除（）;上面我们使用了一个特殊的运算符，感叹号，将可空类型转换为不可空类型。CSS操作CSS其实就是元素中的类。当我们拿到元素后，我们可以调用它的classes字段，然后处理CSS。elem.classes返回一个列表，我们可以在其中添加或删除相应的类。varname=querySelector('#id')!;name.classes.add('redline');有课当然是最好的，课也是我们推荐的写作方式。但有时还是需要直接给元素添加样式，如下图：name.style..fontWeight='bold'..fontSize='3em';处理事件和DOM的交互是各种事件，给element添加事件，可以使用element.onEvent.listen(function)。例如，我们可以添加一个点击事件：querySelector('#id')!.onClick.listen((e){//dosomething});下面是一些常用的事件：changeblurkeyDownkeyUpmouseDownmouseUp总结以上是Dart对html的支持。本文已收录于http://www.flydean.com/20-dart-html/最流行的解读，最深刻的干货，最简洁的教程，很多你不知道的小技巧等着你去探索！欢迎关注我的公众号：《程序那些事儿》，懂技术，更懂你！
