Le classique "Trier"

 https://github.com/dupontdenis/tri.git

L'idée est de trié un tableau en mémoire et de repercuter sur le DOM le changement.


https://dupontdenis.github.io/tri/

composedPath().

 


document.body.addEventListener("click", (eventObject) => { let tabulation = "".padEnd(eventObject.composedPath().length, "▶️"); eventObject.composedPath().forEach((elt) => { document.body.insertAdjacentHTML( "beforeEnd", `<p>Clicked on: ${tabulation} ${elt.nodeName ? elt.nodeName : "Window"}` ); tabulation = tabulation.slice(0, -1); }); });


See the Pen Untitled by dupont (@dupontcodepen) on CodePen.

Be a candidate

 

See the Pen Test election by dupont (@dupontcodepen) on CodePen.

insertion dans le DOM : comparaison

  1. <body>
  2.     <script>
  3.         function strToDom(str){
  4.             return document.createRange().createContextualFragment(str).firstChild;
  5.         }
  6.         const mydiv = strToDom(`<div class="div">document.createRange().createContextualFragment</div>`);
  7.         document.body.appendChild(mydiv);

  9.         document.body.insertAdjacentHTML(`afterBegin`,`<div class="div"> document.insertAdjacentHTML</div>`)
  10.     </script>
  11. </body> 

match en action

 

See the Pen Test selecteur in JS by dupont (@dupontcodepen) on CodePen.

observer

Voici un fichier qui permet de jouer avec l'inspecteur et de vérifier la saisie !

👉https://github.com/dupontdenis/inspecter

  window.onload = function() { 

        let target = document.getElementById("target"),
          response = document.getElementById("response");
        let observer = new MutationObserver(mutations => {
          mutations.forEach(mutation => {
            response.style.display =
              target.style.backgroundColor === "red" ? "block" : "none";
          });
        });
        let observerConfig = {
          attributes: true
        };
        observer.observe(target, observerConfig);
      };


    <div id="background-color">
      <p id="target">Add A Background Color To Me!</p>
      <aside id="response" class="success" style="display:none">
        Success!
      </aside>
    </div>
Inscription à : Articles (Atom)