Dart学习笔记(10):Dart和Web技术(HTML)

发表于2018-07-04 18:14 阅读(42)


在上一章的例子中,用到了Web技术
很多朋友在问具体的用法
其实,通过文档应该很快就能明白代码

本文地址:http://www.cndartlang.com/735.html

这里初略的讲解一下一些常用的API

文档对象模型(Document Object Model,简称DOM)
是W3C组织推荐的处理可扩展标志语言的标准编程接口

dart:html库包含了操作DOM所需的类和方法
与此同时,如果你想要所有HTML5的API得到浏览器的支持
还得额外使用以下库
dart:web_audio、dart:svg、dart:web_gl
dart:indexed_db、dart:web_sql

1、Selector

我们可以使用querySelectorAll和querySelector函数来获取页面元素
这里说一下,queryqueryAll函数过时,不建议使用

通过API我们可以看到
querySelector、document.querySelector以及window.document.querySelector
三种使用选择器的方法其实本质上没有区别
最终都是调用window.document.querySelector
querySelectorAll同理

import "dart:html";

void main() {
    var text = querySelector("#textId");
    text
        ..text = "Welcome to Dart!"
        ..style.backgroundColor = '#f87c45'
        ..lang = 'EN'
        ..attributes.forEach((k, v) => print('$k: $v'));
}

运行结果:

如果你之前习惯了JavaScript
getElementById, getElementByClassName
getElementByName, 以及getElementByTagName
这些方法同样可以使用

//通过ID查找
var element = document.querySelector('#sample_text_id');
var element = document.getElementById('sample_text_id');

//通过Class名查找
var element = document.querySelector('.class');
var element = document.getElementByClassName('class');

//通过标签名查找
var element = document.querySelector('p');
var element = document.getElementsByTagName('p');

//通过Name查找
var element = document.querySelector('[name="myName"]');
var element = document.getElementsByName('myName');

 

可以看到,querySelector非常灵活
通过参数可以取到不同的页面元素

另外,querySelectorAll返回ElimentList,可以输出List或者Set

var elements = document.querySelectorAll('p').toList(growable: true);

2、HtmlElement

在dart:html中,所有东西都是结构化的,并使用类进行分类
如:BodyElement、DivElement、ParagraphElement等

document中所有的HTML元素都继承自HtmlElement
HtmlElement包含了所有元素通用的方法和属性
如:innerHtml、id、click等

var div = new DivElement() //实例化一个Element并设置属性
    ..id='div_id'
    ..text = ' Replacement element';
text.replaceWith(div);//替换元素
//如果想删除元素:text.remove();
  
var myp = new ParagraphElement();
myp..id = 'mypId'
    ..text = 'Paragraph Element!'
    ..title = 'ParagraphElement'
    ..lang = 'EN';
document.body.nodes.add(myp);

运行结果:

3、Parent和Child

你可以很方便的访问上一级Web元素

var divId = querySelector("#div_id");

print(divId.parent.tagName);//DIV
print(divId.parent.id);//textContainerId

children和childNodes都可以得到子元素

不同的地方在于children返回的是List<Element>
因此可以方便的使用这些Element对象的属性和方法
而childNodes返回的是Node列表,可以对节点作具体操作

var body = document.querySelector('body');

body.children.forEach((el) => print(el.tagName));
body.childNodes.forEach((el) => print(el));

运行结果: