The dart series: the exclusive domain of HTML, in addition to javascript, dart can also

Introduction

Although dart can be used as a client and a server at the same time, basically dart is still used as the basic language for flutter development. In addition to andorid and ios, the web is the most common and universal platform. Dart also provides native support for HTML. This support is the dart:html package.

dart:html provides various useful operations on DOM objects and supports HTML5 API. In this way, we can directly use dart to manipulate HTML.

In addition to DOM, dart:html can also operate on css, and using dart:html is also very simple:

import 'dart:html';

DOM manipulation

For DOM manipulation, the first thing is to find this element.

Dart provides querySelector() and querySelectorAll() methods, which can be searched based on ID, class, tag, name or a collection of these elements.

Both are query methods. The difference between the two is that querySelector only returns the first element found, while querySelectorAll returns all elements found.

So querySelector returns an Element, and querySelectorAll returns a collection List<Element>.

Element idElement = querySelector('#someId')!;

Element classElement = querySelector('.some-class')!;

List<Element> divElements = querySelectorAll('div');

List<Element> textInputElements = querySelectorAll( 'input[type="text"]',);

List<Element> specialElement = querySelectorAll('#someId div.class');

The above is our operation to find elements in the DOM. Once found, you can operate on these elements.

Dart uses Element to represent elements in the DOM. For each Element, it has attributes such as classes, hidden, id, style, and title.

If there is no attribute to be set in the Element, you can use attributes, as follows:

elem.attributes['someAttribute'] = 'someValue';

Of course, corresponding to some special Element, there will be a subclass of Element that is bound to it.

For example, for an a tag, as follows:

<a id="name" href="/name/detail">详情</a>

The a tag corresponds to the AnchorElement element in dart.

If you want to change the href value of the a tag, you can do this:

var anchor = querySelector('#name') as AnchorElement;
anchor.href = 'http://www.flydean.com';

You can also add, replace or delete the corresponding node:

querySelector('#id')!.nodes.add(elem);
querySelector('#id')!.replaceWith(elem);
querySelector('#id')?.remove();

Above we used a special operator, the exclamation mark, which means to convert a nullable type into a non-nullable type.

CSS operations

CSS is actually the class in the element. After we get the element, we can call its classes field and then process the CSS.

What elem.classes returns is a list, we can add or delete the corresponding class to it.

var name = querySelector('#id')!;
name.classes.add('redline');

Of course, it is best to have a class, and class is also our recommended way of writing. But sometimes you still need to add style directly to the element, as shown below:

name.style
  ..fontWeight = 'bold'
  ..fontSize = '3em';

Handle event

The interaction with the DOM is a variety of events. To add events to the element, you can use element.onEvent.listen(function).

For example, we can add a click event:

querySelector('#id')!.onClick.listen((e) {
  // do something
});

Here are some commonly used events:

    change
    blur
    keyDown
    keyUp
    mouseDown
    mouseUp

Summarize

The above is Dart's support for html.

This article has been included in http://www.flydean.com/20-dart-html/

The most popular interpretation, the most profound dry goods, the most concise tutorial, and many tips you don't know are waiting for you to discover!

Welcome to pay attention to my official account: "programs, those things", know the technology, know you better!