Modificar datos personalizados con JavaScript

HTML5

Microdatos y datos personalizados

En el post anterior enseñé cómo obtener los valores de los microdatos. En esta ocasión me enfocaré a cómo modificar datos personalizados ya sea tanto con la API como con JavaScript.

Seguiré con el mismo ejemplo del post anterior

XHTML
1
2
3
4
5
6
7
<ul>
    <li data-estreno="1985" data-director="Robert Zemeckis" data-genero="Ciencia ficción">Regreso al futuro</li>
    <li data-estreno="1994" data-director="Robert Zemeckis" data-genero="Comedia dramática">Forrest Gump</li>
    <li data-estreno="1997" data-director="James Cameron" data-genero="Drama">Titanic</li>
    <li data-estreno="1994" data-director="Steven Spielberg" data-genero="Drama histórico">La lista de Schindler</li>
</ul>
<p></p>

Modificar los microdatos

En este caso, voy a cambiar el nombre de todos los directores. Para ello recojo todos los elementos de la lista y los recorro con un bucle for. Dentro del bucle compruebo si puedo usar la API, según pueda o no realizaré la modificación de forma diferente.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
    var peliculas = document.getElementsByTagName("li");
    for (var i=0; i < peliculas.length; i++) {
      if (peliculas[i].dataset)
      {
        peliculas[i].dataset.director = "Homer Simpson";
      }
      else
      {
         peliculas[i].setAttribute("data-director", "Homer Simpson");
      }
    }

Mostrar los microdatos

Una vez modificados añado el siguiente código.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    var output = "Directores de los 80s 90s: ";
    for (var i=0; i < peliculas.length; i++) {
      if (peliculas[i].dataset)
      {
       output += peliculas[i].dataset.director;
      }
      else
      {
       output += peliculas[i].getAttribute("data-director");
      }
  
      if (i != (peliculas.length-1)) {
        output += ", "
      }
    }
    document.getElementsByTagName("p")[0].innerHTML = output;
</script>

En el recojo los datos de una forma u otra según la posibilidad de usar la API de dataset o no. Cada nombre del director lo concateno a un string que será mostrado en el único elemento <p> de la página. Deberías de poner todo el contenido de la etiqueta script al final del <body>.

Y hasta aquí el cómo modificar datos personalizados, espero que os haya gustado. A seguir picando 🙂