modifier style et script

www/css/style.css

@@ -12,6 +12,9 @@
     box-sizing: border-box;
 }
 
+
+
+/** SECTION modifier par script  **/
 #updateDate {
     visibility: hidden;
     display: none;
@@ -32,6 +35,13 @@
     color: white;
 }
 
+#pageCouranteNAV {
+    text-shadow: violet 2px ;
+    box-shadow: #ffefe5;
+}
+
+/** FIN DE SECTION modifier par script  **/
+
 body {
     min-height: 100vh;
     /* Pour footer at bottom from : https://douiri.org/blog/fix-footer-bottom-css/ */

www/js/script.js

@@ -1,3 +1,39 @@
+
+// https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
+// Performance for my useCase (modify NAV and FOOTER)
+
+document.addEventListener("DOMContentLoaded", 
+    function(e) {
+        console.log("DOMContentLoaded triggered !");
+            // for (document.querySelector("nav")
+    });
+
+
+// javascript console output DOM tree
+// https://stackoverflow.com/questions/50305257/how-to-console-log-entire-html-dom-tree-in-order-with-attribute-names
+// https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+
+var walker = document.createTreeWalker(
+  document.documentElement,
+  NodeFilter.SHOW_ELEMENT // only elements
+);
+
+while (walker.nextNode()) {
+  let current = walker.currentNode;
+  console.log(
+    current.tagName,
+    [...current.attributes].map(({value,name}) => `${name}=${value}`).join()
+  );
+}
+
+
+// Needed for image loaded and fetched : Not on local computer.
+/*    https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
+document.addEventListener("load", function(e) {
+  console.log("The page has completely loaded.");
+});
+*/
+
 window.onload = function () {
             setTimeout(function () {
 /*                document.getElementById('message').innerHTML =
@@ -11,7 +47,26 @@ window.onload = function () {
                         document.getElementById("updateDate").setAttribute("id", "updateDateW");
                         document.getElementById("updateDateW").innerHTML = 'À la prochaine!';
                     }
-            }, 1000);
+
+                    // https://developer.mozilla.org/en-US/docs/Web/API/Element/children
+                    // const myHeader = document.getElementByTagName("header"); // TODO: Make sure only first nav (need <header>)
+                    myNav = document.getElementsByTagName("nav");
+                    console.log(myNav.length());
+
+                    for (var i = 0; i < myNav.children.length(); i++) {
+                        var tableChild = myNav.children[i];
+                        console.log(tableChild.tagName);
+                        // Do stuff
+                    }
+
+/*                    for (const child of myNav.children) {
+                    console.log(child.tagName);
+                    }
+*/
+            }, 2000);
+            // NOTE: Change Current Page based on url in <NAV>
+
+
             // TODO Add timer for glitch
             // NOTE Track mouse mouvement and show after a percentage of ?
             // NOTE une page sur deux, ...