brief introduction

Although dart can be used as both client and server, dart is basically used as the basic language for fluent development. In addition to Android and ios, the web is the most common and common platform. Dart also provides native support for HTML, which is dart:html package.

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

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

import 'dart:html';

DOM operation

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

dart provides querySelector() and querySelectorAll() methods, which can be searched according to 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 the elements found.

Therefore, querySelector returns an Element, while querySelectorAll returns a collection List.

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 the 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 the properties of classes, hidden, id, style, and title.

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

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

Of course, corresponding to some special elements, there will be subclasses corresponding to elements bound to them.

For example, for an a tag, it is as follows:

<a id="name" href="/name/detail">details</a>

The a tag corresponds to the AnchorElement element in dart.

To change the href value of a tag:

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

You can also add, replace, or delete corresponding nodes:

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

Above, we use a special operator, exclamation point, to convert a nullable type into a non nullable type.

CSS operation

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

elem.classes returns a list to which we can add or delete corresponding classes.

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

Of course, it's best to have class. Class is also the way we recommend. However, sometimes you need to add style directly to the element, as shown below:

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

Handling events

The interaction with DOM is all kinds of events. To add events to 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 common event s:

    change
    blur
    keyDown
    keyUp
    mouseDown
    mouseUp

summary

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 find!

Welcome to my official account: "those things in procedure", understand technology, know you better!