From c3e6d16b406027117d5fb94d3d49a9b2afaa15e0 Mon Sep 17 00:00:00 2001
From: wesleyfig <102993590+wesleyfig@users.noreply.github.com>
Date: Mon, 20 Jun 2022 13:54:11 -0300
Subject: [PATCH] E06 - DOM

---
 getByName.html | 44 ++++++++++++++++++++++++++++++++++++++++++++
 image.html     | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 table.html     | 42 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 133 insertions(+)
 create mode 100644 getByName.html
 create mode 100644 image.html
 create mode 100644 table.html
diff --git a/getByName.html b/getByName.html
new file mode 100644
index 0000000..402f1a5
--- /dev/null
+++ b/getByName.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>getByName(elem)</title>
+</head>
+<body>
+    <div>
+        <button>Botão 1</button><br>
+        <button>Botão 2</button><br>
+        <button>Botão 3</button><br>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam temporibus optio quae ratione eum ipsa soluta error maxime magni earum. Assumenda labore officiis ad non fuga obcaecati eaque molestiae ea!</p>
+    </div>
+    <div>
+        <button>Botão 4</button><br>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere magni molestias nam accusamus consequatur molestiae eveniet alias, quo, vitae ratione qui a numquam atque, odio laudantium neque blanditiis et deserunt.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam officiis natus earum fugit, dolores nostrum maiores perferendis libero, temporibus dolor nesciunt cum veritatis iusto magni odio eos ipsum mollitia nihil.</p>
+    </div>
+
+    <script>
+        function getByName(node, elem){
+            var count = 0;
+
+            for (var i=0; i<node.childNodes.length; i++){
+                if (node.childNodes[i].childNodes.length > 0){
+                   count += getByName(node.childNodes[i], elem);
+                }
+
+                if (node.childNodes[i].tagName == elem){
+                    count++;
+                }
+            }
+            return count;    
+        }
+
+        console.log("A tag button aparece " + getByName(document, "BUTTON") + " vezes");
+        console.log("A tag p aparece " + getByName(document, "P") + " vezes");
+        console.log("A tag div aparece " + getByName(document, "DIV") + " vezes");
+        console.log("A tag br aparece " + getByName(document, "BR") + " vezes");
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/image.html b/image.html
new file mode 100644
index 0000000..a467070
--- /dev/null
+++ b/image.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Um texto vale mais que mil imagens</title>
+
+    <style>
+        img{
+            width: 100px;
+            height: 200px;
+        }
+        div{
+            display: flex;
+            justify-content: center;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <img src="https://www.coltec.ufmg.br/coltec-ufmg/wp-content/uploads/2018/06/leandro.jpg" alt="el maia">
+    </div>
+    <div>
+        <img src="https://www.coltec.ufmg.br/coltec-ufmg/wp-content/uploads/2018/06/joao.jpg" alt="ola jovens">
+    </div>
+    <div>
+        <img src="https://www.coltec.ufmg.br/coltec-ufmg/wp-content/uploads/2018/06/honda.jpg" alt="honda!">
+    </div>
+
+    <button onclick="substitui()">Um texto vale mais que mil imagens</button>
+
+    <script>
+        function substitui(){
+            var imagens = document.getElementsByTagName("IMG");
+            var size = imagens.length;
+            for(var i=0; i<size; i++){
+                var p = document.createElement("p");
+                var descricao = document.createTextNode(imagens[0].alt);
+                imagens[0].parentNode.appendChild(descricao);
+                imagens[0].parentNode.removeChild(imagens[0]);
+            }
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/table.html b/table.html
new file mode 100644
index 0000000..2c78ec8
--- /dev/null
+++ b/table.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Lidando com tabelas</title>
+</head>
+<body>
+    <label for="">Digite sua tabela no campo abaixo</label><br>
+    <textarea id="texto" cols="30" rows="5"></textarea><br>
+    <button onclick="tabela();" style="margin-bottom: 10px">Enviar</button>
+    <table id="table">
+    </table>
+
+
+    <script>
+        function tabela(){
+            var table = document.getElementById("table"); 
+            var texto = document.getElementById("texto");
+            var row = texto.value.split(' '); 
+
+            var tr = document.createElement("tr"); 
+
+            for (var i=0; i<row.length; i++){
+                var td = document.createElement("td");
+
+                var node = document.createTextNode(row[i]);
+                td.appendChild(node);
+
+                var attr = document.createAttribute("style");
+                attr.value = "border: 1px solid black; padding: 0px 10px;";
+                td.setAttributeNode(attr);
+
+                tr.appendChild(td);
+            }
+            table.appendChild(tr);
+            texto.value = ""; 
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
