1.3.4 - Traversing the DOM

Question 1

Getting the parent of a node

Answer 1

.parentElement and .parentNode

Question 2

What does .parentElement?

its only readable?

Answer 2

returns the DOM node´s parent ELEMENT, or null if the node either has no parent, or its parent isn´t a DOM element

only readable

Question 3

what does .parentNode?

only readable?

Answer 3

returns the parent of the specified node in the DOM tree .parentNode is the parent of the current node. The parent of an element is an Element node, a Document node, or a DocumentFragment node

readable only

Question 4

It´s possible to chain parentNode?

Answer 4

YES

console.log(query.parentNode.parentNode)

Question 5

When searching for childrens in the DOM, whitespace count as a node?

Answer 5

YES

Question 6

When using .parentElement and .parentNode, how it will take whitespaces?

Answer 6

It will NOT take white space as a parent into consideration, it will take the element itself.

That is the reason why both properties will return almost the same thing

Question 7

Why .parentElement and .parentNode will return almost the same thing?

Answer 7

because it´s unlikely that you will have an element who has a parent that is not also an element.

Question 8

In the search for childrens, which 2 general options we have for searching in the DOM?

Answer 8

Selecting nodes of any type

Selecting only ELEMENT nodes

Question 9

When we want to select child nodes of any type, which properties do we have?

Answer 9

.childNodes

.firstChild

.lastChild

Question 10

When we want to select only element nodes, which properties do we have?

and can we count them?

Answer 10

.children

.firstElementChild

.lastElementChild

.childElementCount

Question 11

What does .childNodes and in what category can we place it?

Answer 11

It gives us all the nodes, including white space as well, if we actually have white space between the elements in our HTML source code

category: select nodes of any type

Question 12

What does .firstChild and in what category can we place it?

Answer 12

It gives us the first child, including white space as well. If the first child is a whitespace, it will get that

category: select nodes of any type

Question 13

What does .lastChild and in what category can we place it?

Answer 13

It gives us the last child, including white space as well, if the last child is a white space, ti will get that

category: select nodes of any type

Question 14

What does .children and in what category can we place it?

Answer 14

It gives us just ELEMENTS as the results(if we have whitespaces, it doesn´t care)

category: select only ELEMENT nodes

Question 15

What does .firstElementChild and in what category can we place it?

Answer 15

It gives us the first child element, it does not care if it´s a whitespace

category: select only element nodes

Question 16

What does .lastElementChild and in what category can we place it?

Answer 16

It gives us the last child element, it does not care if it´s white space.

category: select only element nodes

Question 17

What does .childElementCount and in what category can we place it?

Answer 17

It gives us a count of all the children

category: select only element nodes

Question 18

What problems can we face when selecting node types or element nodes?

Answer 18

If the document has whitespaces, when usint the “select node of any types” whitespaces will count as nodes, if we are using those selectors, and then the HTML source code gets compressed, we can have some errors, if we tried to select ELEMENTS using node type selectors.

If we are just focusing on selecting nodes and not elements, we can get completely different results

Question 19

How do we get the length of an array, and the node type?

Answer 19

var content = document.querySelector( ‘.content’ );

content. children.length
content. firstElementChild.nodeType
content. childNodes.length
content. firstChild.nodeType

Question 20

When selecting siblings, what major categories do we have?

Answer 20

selecting sibligns from

any node type

any element node

Question 21

What are the differences between selecting

any node type

any element nodes type

Answer 21

When selecting “any node type” are all nodes, including white spaces

When selecting “any element nodes types” are just nodes of the type ELEMENTS

Question 22

How can we select siblings of any node type?

Answer 22

using

.nextSibling

.previousSibling

Question 23

how can we select siblings of any node type of ELEMENT

Answer 23

using:

.nextElementSibling

.previousElementSibling

Question 24

document.documentElement

a qué hace referencia, que retorna?

Answer 24

a la etiqueta

< html >

Question 25

Cuando document.body puede ser/retornar null?

Answer 25

Si el script desde el cual invocamos document.body esta dentro de la etiqueta \< head \>, document.body es inaccesible, porque el navegador no lo leyó aún.

Question 27

Imaginemos mentalmente un div que tiene un nodo padre, dos nodos hermanos y nodos hijos: todos los nodos hijos y el primer y último nodo hijo Como lo podríamos diagramar, usando las propiedades para retornarlos?

Answer 27

Question 28

Podemos acceder elementos que aún no existen en el momento de ejecución por ej: tratar de acceder a document.body desde la etiqueta \< head \>

Answer 28

NO

Question 30

When we talk about **Child nodes(or children)**, and **Descendants**, what are we meaning?

Answer 30

**Child nodes(or children)**: elements that are direct children, they are nested exactly in the given one. for instance, "head" and "body" are children of "html" **Descendants**: all elements that are nested in the given one, including children, their children and so on

Question 31

What methods can we use to check if we have child nodes?

Answer 31

elem.hasChildNodes()

Question 32

DOM collections are read-only?

Answer 32

YES

Question 33

Why it´s better to use for...of to loop over a collection?

Answer 33

The for...in loop iterates over all enumerable properties, and collections have some "extra" rarely used properties that we usually don´t want to get

Question 34

It is a good practice to use for... in to loop over collections?

Answer 34

NO

Question 35

What is better to use when we want to loop over a collection? for...in or for... of?

Answer 35

for of

Question 37

What are siblings? example with head and body

Answer 37

nodes that are children of the same parent "head" and "body" are siblings

Question 38

Talking about siblings... "body" is said to be the ... or ... sibling of "head" "head" is said to be the ... or ... sibling of "body"

Answer 38

"body" is said to be the **next** or **right** sibling of "head" "head" is said to be the **previous** or **left** sibling of "body"

Question 39

When parentNode and parentElement returns something "different" What is the exception?

Answer 39

document. documentElement.parentNode // document document. documentElement.parentElement // null

Question 40

documentElement "html" is the root node?

Answer 40

YES

Question 41

Whitch is the root node?

Answer 41

documentElement "html"

Question 42

Why using parentNode and parentElement on document.documentElement returns different things

Answer 42

Because "**document**" is the **parent** of **documentElement**, but "**document**" ***is not an element node***,

Question 43

number of properties for accessing all node types name of the properties for accessing all node types

Answer 43

6 parentNode, childNodes, firstChild, lastChid, previousSibling, nextSibling

Question 44

number of properties for accessing all element nodes name of the properties for accessing all element nodes

Answer 44

6 parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling

Question 45

If elem – is an arbitrary DOM element node… Is it true that elem.lastChild.nextSibling is always null?

Answer 45

Yes, true. The element elem.lastChild is always the last one, it has no nextSibling, so if there are children, then yes.

Question 46

If elem – is an arbitrary DOM element node… Is it true that elem.children[0].previousSibling is always null ?

Answer 46

No, wrong, because elem.children[0] is the first child among elements. But there may be non-element nodes before it. So previousSibling may be a text node.