dataset.html 

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Dataset</title>
  6.     <style>
  7.         .resaltado { background-color:yellow; }
  8.     </style>
  9.     <script>
  10.  
  11.         /*
  12.             El atributo puede ser 'anim' o 'bn'
  13.         */
  14.         function resaltar(atributo) {
  15.             const pelis = document.querySelectorAll('#pelis li');
  16.             for (const li of pelis) {
  17.                 li.className = "";
  18.                 if (atributo == 'anim') {
  19.                     if (li.dataset.anim == "S") {
  20.                         li.className = "resaltado";
  21.                     }
  22.                 } else if (atributo == 'bn') {
  23.                     if (li.dataset.bn == "S") {
  24.                         li.className = "resaltado";
  25.                     }
  26.                 }
  27.             }
  28.         }
  29.  
  30.         function generizar(genero) {
  31.             const pelis = document.querySelectorAll('#pelis li');
  32.             for (const li of pelis) {
  33.                 li.className = "";
  34.                 const arrayGeneros = li.dataset.gen.split(' ');
  35.                 if (arrayGeneros.includes(genero)) {
  36.                     li.className = "resaltado";
  37.                 }
  38.             }
  39.         }    
  40.  
  41.     </script>
  42. </head>
  43. <body>
  44.     <h1>Dataset</h1>
  45.     <ul id="pelis">
  46.         <li data-anim="S" data-gen="familiar muerte">Coco</li>
  47.         <li data-anim="S" data-gen="cuento ogro">Shrek</li>
  48.         <li data-bn="S" data-gen="stopmotion">King Kong</li>
  49.         <li data-anim="S" data-gen="lampara genio">Aladdin</li>
  50.         <li data-gen="playa muerte">Tiburón</li>
  51.         <li data-gen="arena gusano">Dune</li>
  52.         <li data-bn="S" data-gen="vampiro">Nosferatu</li>
  53.         <li data-bn="S" data-gen="stopmotion">Godzilla</li>
  54.         <li data-anim="S" data-gen="robot">Mazinger</li>
  55.         <li data-anim="S" data-gen="robot">Evangelion</li>
  56.     </ul>
  57.     <h2>Resaltar</h2>
  58.     <p>
  59.         <button onclick="resaltar('anim')">Animación</button>
  60.         <button onclick="resaltar('bn')">Blanco y negro</button>        
  61.     </p>
  62.     <p>
  63.         Género:
  64.         <button onclick="generizar('stopmotion')">stopmotion</button>
  65.         <button onclick="generizar('robot')">robot</button>
  66.         <button onclick="generizar('muerte')">muerte</button>
  67.     </p>
  68. </body>
  69. </html>

Proinf.net