Comunidad de diseño web y desarrollo en internet

Cómo manipular el DOM con Dart

Ya hicimos nuestra primera aplicación en Dart (una parte muy pequeña). Ahora vamos a ver cómo manipular el DOM con Dart.

Seleccionar de elementos existentes en el DOM


En Dart, utilizaremos dos métodos a la hora de seleccionar un elemento existente en el DOM: querySelector() y querySelectorAll(), ambos reciben como parámetro un String, ya sea con el ID, la clase o el tag del elemento que deseamos encontrar. Por ejemplo:

Código :

var holaDiv = querySelector('#hola');
    List<Element> holaDivs = querySelectorAll('.hola');


Como podemos ver, querySelector() nos devuelve un objeto Element, mientras que querySelectorAll() nos devuelve un objeto ElementList. Ya con nuestro elemento del DOM seleccionado podemos proceder a modificarlo, agregarle eventos, etc. Por ejemplo, si deseamos agregar un evento de click a un botón haríamos los siguiente:

Código :

querySelector('#botonEnviar').onClick.listen((e) => print('Hey! Me hizo click'));


Ten en cuenta que el método listen recibe como parámetro el nombre del método que deseamos ejecutar, en este caso hicimos uso de una función anónima.


Remover elementos existentes en el DOM


En Dart tenemos dos formas de eliminar elementos del DOM:

  1. Eliminar un elemento individual.
  2. Eliminar varios elementos hijos de otro elemento.

Para lograr la primera forma, debemos utilizar el método remove(), por ejemplo:

Código :

querySelector('#elemento').remove();


Para lograr la segunda forma, debemos utilizar el método clear(), por ejemplo:

Código :

querySelector('#elementoConElementitos').children.clear();


Lo que hace children es seleccionar todos los elementos que sean hijos del elemento seleccionado (nos devuelve una lista con los elementos: List<Element>).

Cómo agregar elementos al DOM


Como podemos modificar y eliminar, también era obvio que íbamos a encontrar una forma de agregar nuevos elementos al DOM.

Comparado con las formas pasadas, esta es un poco más complicada, ya que debemos utilizar un constructor que nos provea Dart. Después lo que haremos será agregar nuestro nuevo elemento en un elemento ya creado en el DOM (por ejemplo, una lista no ordenada, como será el ejemplo siguiente).

Código :

LIElement nuevoLi = new LIElement();
nuevoLi.text = 'Texto cualquiera en el nuevo LI';
querySelector('#lista').children.add(nuevoLi);


El constructor LIElement es uno de los muchos constructores que nos provee el paquete dart:html.

Estas serían las cosas básicas que podríamos hacer con el DOM, ya que es cuestión de practicar un poco más y experimentar para ver que cosas geniales podemos llegar a lograr.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate