1.3.4 - Traversing the DOM Flashcards
Getting the parent of a node
.parentElement and .parentNode
What does .parentElement?
its only readable?
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
what does .parentNode?
only readable?
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
It´s possible to chain parentNode?
YES
console.log(query.parentNode.parentNode)
When searching for childrens in the DOM, whitespace count as a node?
YES
When using .parentElement and .parentNode, how it will take whitespaces?
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
Why .parentElement and .parentNode will return almost the same thing?
because it´s unlikely that you will have an element who has a parent that is not also an element.
In the search for childrens, which 2 general options we have for searching in the DOM?
Selecting nodes of any type
Selecting only ELEMENT nodes
When we want to select child nodes of any type, which properties do we have?
.childNodes
.firstChild
.lastChild
When we want to select only element nodes, which properties do we have?
and can we count them?
.children
.firstElementChild
.lastElementChild
.childElementCount
What does .childNodes and in what category can we place it?
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
What does .firstChild and in what category can we place it?
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
What does .lastChild and in what category can we place it?
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
What does .children and in what category can we place it?
It gives us just ELEMENTS as the results(if we have whitespaces, it doesn´t care)
category: select only ELEMENT nodes
What does .firstElementChild and in what category can we place it?
It gives us the first child element, it does not care if it´s a whitespace
category: select only element nodes
What does .lastElementChild and in what category can we place it?
It gives us the last child element, it does not care if it´s white space.
category: select only element nodes
What does .childElementCount and in what category can we place it?
It gives us a count of all the children
category: select only element nodes
What problems can we face when selecting node types or element nodes?
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
How do we get the length of an array, and the node type?
var content = document.querySelector( ‘.content’ );
content. children.length
content. firstElementChild.nodeType
content. childNodes.length
content. firstChild.nodeType
When selecting siblings, what major categories do we have?
selecting sibligns from
any node type
any element node
What are the differences between selecting
any node type
any element nodes type
When selecting “any node type” are all nodes, including white spaces
When selecting “any element nodes types” are just nodes of the type ELEMENTS
How can we select siblings of any node type?
using
.nextSibling
.previousSibling
how can we select siblings of any node type of ELEMENT
using:
.nextElementSibling
.previousElementSibling
document.documentElement
a qué hace referencia, que retorna?
a la etiqueta
< html >
Cuando document.body puede ser/retornar null?
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.
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?
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 >
NO
When we talk about Child nodes(or children), and Descendants, what are we meaning?
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
What methods can we use to check if we have child nodes?
elem.hasChildNodes()
DOM collections are read-only?
YES
Why it´s better to use for…of to loop over a collection?
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
It is a good practice to use for… in to loop over collections?
NO
What is better to use when we want to loop over a collection?
for…in or for… of?
for of
What are siblings?
example with head and body
nodes that are children of the same parent
“head” and “body” are siblings
Talking about siblings…
“body” is said to be the … or … sibling of “head”
“head” is said to be the … or … sibling of “body”
“body” is said to be the next or right sibling of “head”
“head” is said to be the previous or left sibling of “body”
When parentNode and parentElement returns something “different”
What is the exception?
document. documentElement.parentNode // document
document. documentElement.parentElement // null
documentElement “html” is the root node?
YES
Whitch is the root node?
documentElement “html”
Why using parentNode and parentElement on
document.documentElement
returns different things
Because “document” is the parent of documentElement, but “document” is not an element node,
number of properties for accessing
all node types
name of the properties for accessing
all node types
6
parentNode, childNodes, firstChild, lastChid, previousSibling, nextSibling
number of properties for accessing
all element nodes
name of the properties for accessing
all element nodes
6
parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling
If elem – is an arbitrary DOM element node…
Is it true that elem.lastChild.nextSibling is always null?
Yes, true. The element elem.lastChild is always the last one, it has no nextSibling, so if there are children, then yes.
If elem – is an arbitrary DOM element node…
Is it true that elem.children[0].previousSibling is always null ?
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.
