add novos exercicios sobre API DOM, elementos de travessia, e manipulação de elementos

Samuel-Amaro · Samuel-Amaro · commit c563d129cb47 · 2022-03-31T09:06:07.000-03:00
diff --git a/EXE_API_DOM/DOM-children.html b/EXE_API_DOM/DOM-children.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html lang="en-us">
+<head>
+    <meta charset="utf-8"/>
+    <title>Exe Dom</title>
+</head>
+<body>
+
+  <div>Users:</div>
+  <ul>
+      <li>John</li>
+      <li>Pete</li>
+  </ul>
+
+  <script type="text/javascript">
+      //Para cada um dos itens a seguir, forneça pelo menos uma maneira de acessá-los:
+
+      //O <div> nó DOM?
+      let div = document.body.firstElementChild;
+      console.log(div);
+
+      //O <ul>nó DOM?
+      let ul = div.nextElementSibling;
+      console.log(ul);
+
+      //A segunda <li> (com Pete)?
+      let li = ul.lastElementChild;
+      console.log(li);
+
+  </script>
+</body>
+</html>
diff --git a/EXE_API_DOM/Select-All-Diagonal-Cell.html b/EXE_API_DOM/Select-All-Diagonal-Cell.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html lang="en-us">
+<head>
+    <meta charset="utf-8"/>
+    <title>Exe Dom</title>
+    <style>
+        table {
+          border-collapse: collapse;
+        }
+    
+        td {
+          border: 1px solid black;
+          padding: 3px 5px;
+        }
+    </style>
+</head>
+<body>
+
+    <table>
+        <tr>
+          <td>1:1</td>
+          <td>2:1</td>
+          <td>3:1</td>
+          <td>4:1</td>
+          <td>5:1</td>
+        </tr>
+        <tr>
+          <td>1:2</td>
+          <td>2:2</td>
+          <td>3:2</td>
+          <td>4:2</td>
+          <td>5:2</td>
+        </tr>
+        <tr>
+          <td>1:3</td>
+          <td>2:3</td>
+          <td>3:3</td>
+          <td>4:3</td>
+          <td>5:3</td>
+        </tr>
+        <tr>
+          <td>1:4</td>
+          <td>2:4</td>
+          <td>3:4</td>
+          <td>4:4</td>
+          <td>5:4</td>
+        </tr>
+        <tr>
+          <td>1:5</td>
+          <td>2:5</td>
+          <td>3:5</td>
+          <td>4:5</td>
+          <td>5:5</td>
+        </tr>
+    </table>
+
+    <script type="text/javascript">
+        //Escreva o código para pintar todas as células da tabela diagonal em vermelho.
+        //Você precisará obter todos os <td> diagonais da <table> e pintá-los usando o código:
+        //td deve ser a referência para a célula da tabela
+        //td.style.backgroundColor = 'red';
+
+        let table = document.body.firstElementChild;
+        let listRows = table.querySelectorAll('tr');
+        listRows = Array.from(listRows);
+        let countRows = 0, tdColor, listTds;
+        //primeira solução
+        /*for (const tr of listRows) {
+            tdColor = tr.querySelector(`td:nth-child(${countRows})`);
+            tdColor.style.backgroundColor = 'red';
+            countRows++;
+        }*/
+        //segunda solução
+        for(const tr of listRows) {
+            listTds = Array.from(tr.querySelectorAll('td'));
+            tdColor = listTds[countRows];
+            tdColor.style.backgroundColor = 'red';
+            countRows += 1;
+        }
+    </script>
+</body>
diff --git a/EXE_API_DOM/The-Sibling-question.html b/EXE_API_DOM/The-Sibling-question.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html lang="en-us">
+<head>
+    <meta charset="utf-8"/>
+    <title>Exe Dom</title>
+</head>
+<body>
+
+    <script type="text/javascript">
+        //If elem– é um nó de elemento DOM arbitrário…
+        //É verdade que elem.lastChild.nextSibling é sempre null? sim verdade
+        //É verdade que elem.children[0].previousSibling é sempre null? não errado, porde have elementos anteriores ha ele
+    </script>
+</body>
+</html>
