Skip to content

Commit 9334e5b

Browse files
Samuel-AmaroSamuel-Amaro
committed
exercicios sobre conteudo API DOM node properties
1 parent 5bce5e5 commit 9334e5b

File tree

4 files changed

+148
-0
lines changed

4 files changed

+148
-0
lines changed

‎EXE_API_DOM/count-descendants.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
</head>
8+
9+
<body>
10+
11+
<ul>
12+
<li>Animals
13+
<ul>
14+
<li>Mammals
15+
<ul>
16+
<li>Cows</li>
17+
<li>Donkeys</li>
18+
<li>Dogs</li>
19+
<li>Tigers</li>
20+
</ul>
21+
</li>
22+
<li>Other
23+
<ul>
24+
<li>Snakes</li>
25+
<li>Birds</li>
26+
<li>Lizards</li>
27+
</ul>
28+
</li>
29+
</ul>
30+
</li>
31+
<li>Fishes
32+
<ul>
33+
<li>Aquarium
34+
<ul>
35+
<li>Guppy</li>
36+
<li>Angelfish</li>
37+
</ul>
38+
</li>
39+
<li>Sea
40+
<ul>
41+
<li>Sea trout</li>
42+
</ul>
43+
</li>
44+
</ul>
45+
</li>
46+
</ul>
47+
48+
<script type="text/javascript">
49+
/**
50+
* Há uma árvore estruturada como aninhada ul/li.
51+
*
52+
* Escreva o código que para cada <li> mostra:
53+
54+
1. Qual é o texto dentro dele (sem a subárvore)
55+
56+
2. O número de aninhados <li> – todos os descendentes, incluindo os profundamente aninhados.
57+
*/
58+
59+
let allLis = document.body.querySelectorAll('li');
60+
61+
for(let liItem of allLis) {
62+
console.log(`${liItem.firstChild.textContent.trim()}: ${liItem.querySelectorAll('li').length}`);
63+
}
64+
</script>
65+
66+
</body>
67+
68+
</html>

‎EXE_API_DOM/tag-in-comment.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
</head>
7+
<body>
8+
9+
<script type="text/javascript">
10+
11+
/**
12+
* O que esse código mostra?
13+
* */
14+
15+
let body = document.body;
16+
17+
body.innerHTML = "<!--" + body.tagName + "-->";
18+
19+
console.log(body.firstChild.data);
20+
21+
//R: BODY
22+
23+
</script>
24+
25+
</body>
26+
27+
</html>

‎EXE_API_DOM/whats-in-the-nodeType.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
</head>
8+
<body>
9+
10+
<script type="text/javascript">
11+
/**
12+
* O que o script mostra?
13+
* */
14+
15+
console.log(document.body.lastChild.nodeType); //1 - Node Element
16+
17+
</script>
18+
19+
</body>
20+
21+
</html>

‎EXE_API_DOM/wheres-the-document-in-the-hierarchy.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
</head>
7+
<body>
8+
9+
<script type="text/javascript">
10+
11+
/**
12+
* A qual classe document pertence?
13+
*
14+
* Qual é o seu lugar na hierarquia DOM?
15+
*
16+
* Ele herda de Node ou Element, ou talvez HTMLElement?
17+
*/
18+
19+
//Qual classe document pertence ? HTMLDocument
20+
console.log(document.constructor.name);
21+
22+
//Qual é o seu lugar na hierarquia DOM? no topo
23+
console.log(document.documentElement);
24+
25+
//Ele herda de Node ou Element, ou talvez HTMLElement? Element, HTMLElement herda de Element, Element herda de Node
26+
//console.log(document.documentElement.parentNode);
27+
28+
</script>
29+
30+
</body>
31+
32+
</html>

0 commit comments

Comments
 (0)