Using data attributes selected via querySelectorAll and implementing a switch statement in JavaScript - How to?

Question

I'm currently working on a JavaScript project where I've selected multiple elements using querySelectorAll based on custom data attributes. My requirement is to use a switch construct to manipulate each of these elements based on their data attribute. For instance, I have elements with attributes like data-printpdf-h2, data-printpdf-span, data-printpdf-input, etc., and I'd like to employ a switch statement to logically process these elements according to their data attribute type.

I've attempted to use a switch statement in conjunction with querySelectorAll, but it seems that my switch isn't functioning correctly for these custom attributes. I'm looking to understand how I can successfully retrieve data from these selected elements through querySelectorAll and effectively use them within a switch statement to handle each element specifically.

Here's an example of my code:

javascript:

      var elementsToPrint = document.querySelectorAll(
        '[data-printpdf-Cpv-response-div="true"], [data-printpdf-Cpv-div="true"], [data-printpdf-Cig-div="true"], [data-printpdf-h2="true"], [data-printpdf-span="true"], [data-printpdf-input="true"], [data-printpdf-textarea="true"], [data-printpdf-label="true"], [data-printpdf-div="true"], [data-printpdf-label-roleName-label="true"], [data-printpdf-label-procedure-label="true"], [data-printpdf-strong="true"]'
      );

      // Itera attraverso gli elementi e aggiungi le informazioni al documento PDF
      for (var i = 0; i < elementsToPrint.length; i++) {

        var element = elementsToPrint[i];
        var elementType = element.tagName.toLowerCase();
        // Usa uno statement switch per gestire diversi tipi di elementi
        switch (elementType) {

          case 'data-printpdf-h2':
            // Imposta la dimensione del carattere per h2 
            doc.setFont("Verdana", "bold");
            doc.setFontSize(12);
            // Suddivide il testo in parti che si adattano alla larghezza della pagina
            var textPartsH2 = doc.splitTextToSize(
              element.textContent,
              pageWidth - 2 * margin
            );
            textPartsH2.forEach((part, index) => {
              // Verifica se la nuova posizione corrente supera l'altezza massima
              if (currentY + 5 > pageHeight - margin) {
                doc.addPage();
                currentY = margin;
              }
              // Aggiungi il testo al documento PDF
              doc.text(part, leftMargin, currentY);
              // Aggiorna la posizione corrente sulla pagina
              currentY += 10; // Puoi regolare la distanza tra le righe
            });
            break;`

My main issue revolves around understanding how to accurately capture the data attributes of these elements selected via querySelectorAll and effectively utilize them within a switch statement. Any guidance or examples on achieving this would be highly appreciated.

Thanks in advance for any help or insights provided!

*We are currently working on a JavaScript project where we've employed querySelectorAll to select multiple HTML elements based on custom data attributes. These attributes are specifically created for identification purposes, such as data-printpdf-h2, data-printpdf-span, data-printpdf-input, and others, associated with various HTML elements.

Our goal is to iterate through these selected elements and apply specific operations or functionalities based on the type of data attribute associated with each element. For instance, we intend to perform distinct actions for elements marked with data-printpdf-h2 as compared to those tagged with data-printpdf-span or other custom data attributes.

I expect it to capture the text elements in which the data is entered in the html tags, but at the moment it doesn't return the texts that are inside the html tags that I am recalling with the data.