add novos exercicios sobre propriedade e atributos API DOM

Samuel-Amaro · Samuel-Amaro · commit 36f067ce1148 · 2022-06-03T15:03:35.000-03:00
diff --git a/EXE_API_DOM/get-the-attribute.html b/EXE_API_DOM/get-the-attribute.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en-us">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+<body>
+
+    <div data-widget-name="menu">Choose the genre</div>
+
+    <script type="text/javascript">
+        
+        /**
+         * Escreva o código para selecionar o elemento com data-widget-name atributo do documento e ler seu valor.
+        */  
+
+        let div = document.body.firstElementChild;
+
+        console.log(div.dataset.widgetName); //menu
+
+        console.log(div.getAttribute('data-widget-name')); //menu
+
+    </script>
+
+</body>
+
+</html>
diff --git a/EXE_API_DOM/make-external-links-orange.html b/EXE_API_DOM/make-external-links-orange.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en-us">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+<body>
+
+    <a name="list">the list</a>
+    <ul>
+        <li><a href="http://google.com">http://google.com</a></li>
+        <li><a href="/tutorial">/tutorial.html</a></li>
+        <li><a href="local/path">local/path</a></li>
+        <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
+        <li><a href="http://nodejs.org">http://nodejs.org</a></li>
+        <li><a href="http://internal.com/test">http://internal.com/test</a></li>
+    </ul>
+
+    <div data-widget-name="menu">Choose the genre</div>
+
+    <script type="text/javascript">
+        
+       /**
+        * Torne todos os links externos laranja alterando suas style propriedades.
+        * 
+        * Um link é externo se:
+    
+            - Seu href tem :// nele
+
+            - Mas não começa com http://internal.com.
+        */
+
+
+        //estilo de configuração para um único link
+        let allLinks = document.querySelectorAll('a');
+
+        for(let link of allLinks) {
+            if(link.getAttribute('href') != null) {
+                if(link.getAttribute('href').includes('://') && link.getAttribute('href').startsWith('http://internal.com') == false) {
+                    link.style.color = 'orange';
+                }
+            }
+        }
+    </script>
+
+</body>
+</html>
