1.3.5 - Getting and Settings DOM Node Values

Question 1

Which properties do we have for getting and setting Elements Nodes

Answer 1

.innerHTML

.innerText

.textContent

.outerHTML

Question 2

Which properties do we have for getting and setting Text Nodes

Answer 2

.data

.nodeValue

Question 3

.innerHTML for what is used?

Element Nodes or Text Nodes

Answer 3

Element Nodes

Question 4

.innerText for what is used?

Element Nodes or Text Nodes

Answer 4

Element Nodes

Question 5

.textContent for what is used?

Element Nodes or Text Nodes

Answer 5

Element Nodes

Question 6

.outerHTML for what is used?

Element Nodes or Text Nodes

Answer 6

Element Nodes

Question 7

.data for what is used?

Element Nodes or Text Nodes

Answer 7

Text Nodes

Question 8

.nodeValue for what is used?

Element Nodes or Text Nodes

Answer 8

Text Nodes

Question 9

.innerHTML What returns?

returns all markup inside the …, without the … (it gets the descendant)

Answer 9

returns all markup inside the selected area, without the wrapper that we selected (it gets the descendant)

Question 10

.innerHTML what returns?

all the markup inside the selected area, without the wrapper, and with their descendants?

Answer 10

YES

Question 11

.innerHTML what returns?

It´s true to say that it will return the HTML markup with the wrapper that we select?

Answer 11

NO

returns all markup inside the selected area, WITHOUT the wrapper that we selected (it gets the descendant)

Question 12

.innerHTML what return?

Answer 12

returns all markup inside the selected area, without the wrapper that we selected (it gets the descendant)

Question 13

.innerHTML

When setting content, it change the DOM and the source code?

Answer 13

YES, it changes the DOM

NO, it not change the source code

Question 14

.innerHTML

What is a good practice, when we are using .innerHTML for setting content, if we are appending a lot of content to it?

Answer 14

To append the content, into a new variable like:

var newVar = ‘title’;

newVar += ‘More content’;

contenido.innerHTML = newVar;

Question 15

.innerHTML

It’s possible to append content directly on the property?

Answer 15

YES

Question 16

.innerHTML

If we had which nodes … that has a child text node, that includes the characters &, <, >, will returns what characters?

Answer 16

the nodes that need to have a child text node are:

div, span, noembed

returned characters:

&amp, &lt, &gt

Question 17

.innerHTML

What can we use to get a correct copy of the text nodes that are child of elements: div, span, noembed , that has the characters:

&, <, >

Answer 17

We can use .textContent

Question 18

Why we need to use .textContent with nodes elements like:

div, span, noembed

that has child text node, that includes the characters:

&, <, >

Answer 18

Because if we use .innerHTML will return the characters &amp, &lt, &gt

Question 19

.innerText is it true that will return the following?

Returns all the text, without formatting and markups. It’s like if the user would highlighted the contents of the element with the cursor and then copied to the clipboard

Answer 19

YES

Question 20

.innerText?

Returns …, without formatting and markups.

Answer 20

Returns all the text, without formatting and markups

Question 21

.innerText?

It is true that will return all the text with the proper formatting and markups?

Answer 21

NO

It will return all the text, without formatting and markups

Question 22

.innerText

We can say that it’s like if the user do what?

Answer 22

Would highlight the content of the element with the cursor and then copied to the clipboard.

Question 23

.innerText?

What happens when we have a css rule “display: none”

Answer 23

Using .innerText, that section will be ignored, not returned

Question 24

.innerHTML parse content as HTML, and takes longer to run?

What will be the output?

Answer 24

YES

output: text/HTML

Question 25

.innerText will take styles into consideration? what it means?

Answer 25

YES it takes styles into consideration It means that, it won´t get hidden text for instance.

Question 26

.textContent Returns all the content without interfering with css rules?

Answer 26

YES

Question 27

.textContent If the element is a document, a docType, what it returns?

Answer 27

returns null document.textContent // null

Question 28

.textContent to grab all text for the whole document we can use what?

Answer 28

document.documentElement.textContent

Question 29

.textContent if the data is CDATA section, comment, text node, what will return?

Answer 29

returns the text inside this node

Question 30

.textContent what will return?

Answer 30

get the content of all elements, including **script** and **style** elements ## Footnote **and all its descendants**

Question 31

.textContent set ? When setting, it´s true that it will remove all of its children and relaces them with a single text node with the given value?

Answer 31

YES

Question 32

.textContent It removes all the children and do what?

Answer 32

Removes all of its children and replaces them with a single text node with the given value.

Question 33

.textContent It places a single text node with the given value, and replaces all?

Answer 33

YES

Question 34

.textContent, What it does when setting content?

Answer 34

When setting, it will remove all of its children and relaces them with a single text node with the given value?

Question 35

.innerText is aware of CSS styling? What will do with hidden elements?

Answer 35

Yes it´s aware of css styling DON´T return the text of hidden elements.

Question 36

Who will return a hidden element, that was hidden with css? innerText or textContent

Answer 36

textContent

Question 37

It´s true to say that Reflow is: computes the layout of the page, on an element recomputes the dimensiones and positions of the element, and all the children elements?

Answer 37

YES

Question 38

Reflow in simple terms is: recom...

Answer 38

recomputes the dimensions and positions of elements and positions, also of their childrens, and finally calls for a final repaint.

Question 39

Reflowing is very expensive, or not to performance?

Answer 39

YES IT is

Question 40

Who will trigger REFLOW, innerText or textContent? and Why?

Answer 40

innerText will trigger reflow. Becase is aware of CSS styling.

Question 41

To avoid reflow what we need to use if we want to add text to a node?

Answer 41

use textContent

Question 42

Often in order to retrieve or write text within an element, people use innerHTML, however ...

Answer 42

.textContent often has better performance because the text is not parsed as HTML

Question 43

when retrieving or writing text within an element, which one of these properties has better performance: .innerHTML or .textContent and why?

Answer 43

textContent Because the text is not parsed as HTML

Question 44

which property will prevent a xss attack?

Answer 44

textContent, because it not parse HTML The most fundamental safe way to populate the DOM with **untrusted data** is to use the safe assignment property, textContent. element.textContent = "\<%=untrustedData%\>"; //does not executes code

Question 45

.outerHTML return? Returns the markup and content, including the descendants... also, it includes the wrapper tag of the selection, or not?

Answer 45

Yes, it includes the wrapper tag of the selection

Question 46

.outerHTML returns... HTML ...., including the ... and the ....

Answer 46

HTML markup and content, including the descendants and the wrapper tag of the selection

Question 47

.outerHTML returns what?

Answer 47

HTML markup and content, including the descendants and the wrapper tag of the selection

Question 48

.outerHTML setting can you append to the property itself?

Answer 48

NO

Question 49

.outerHTML setting What is better to append to a new variable or directly in the property itself?

Answer 49

To a new variable, we can´t append to the property itself

Question 50

when using .outerHTML to set a value, it´s going to grab the entirely element and re-writing it completely?

Answer 50

YES, the wrapper itself and its descendants

Question 51

.outerHTML if the element is the root element of the document, what will happend?

Answer 51

will throw a DOMException with an error

Question 52

.outerHTML setting What happens to the variable whose .outerHTML property was set?

Answer 52

While the element will be replaced, the variable whose .outerHTML property was set will still hold a reference to the original element

Question 53

.outerHTML what will set?

Answer 53

The entirely element and completely re-write it, the wrapper element itself and his descendants

Question 54

.data .nodeValue Will get / set almost the same result?

Answer 54

yes

Question 55

When we can see a difference when getting value of text nodes with .data and .nodeValue?

Answer 55

when dealing with attributes values

Question 56

When dealing with attributes what will return .data? It is consistent across text values and attribute values?

Answer 56

undefined NO, it´s not consistent

Question 57

When dealing with attributes values, what will return .nodeValue? it is consistent?

Answer 57

returns the actual result of the attribute It is more consistent

Question 58

Imagine an element-only navigation imagine: parent, siblings childrens (properties to access them)

Answer 58

Question 59

When we are setting the value of a text node, it´s better to set a conditional check, why is that?

Answer 59

Because we need to prevent to change the nodeValue of an element, we need to check if it´s really a text node type

Question 60

About "what", we need to be aware of, when we are setting the value of a node text type? Remember: element nodes VS text nodes

Answer 60

We need to check with a conditional if the node it´s really a text node type, and not an element node

Question 61

What will happend if we use .data or .nodeValue when setting the value of an Element node type

Answer 61

It will give us an error, and nothing will change.

Question 62

Which one is faster .nodeValue or .innerHTML? and why?

Answer 62

nodeValue .innerHTML parse HTML that´s why it takes longer

Question 63

Which one parse text and which one uses straight text, .innerHTML or .textContent What are they outputs?

Answer 63

.innerHTML parse content as HTML and takes longer. Output text/HTML .textContent uses straight text, does not parse HTML, and is faster. Output: text/plain

Question 64

.innerText, takes styles into consideration?

Answer 64

Yes, it won´t get hidden text for instance.

Question 65

En el DOM, la palabra null significa, "que no existe"?

Answer 65

SI

Question 66

En el DOM, que significa la palabra "null"

Answer 66

que no existe

Question 67

In the code on the image, what are we going to return, and what it will happend to the ...more stuff... elements that we have?

Answer 67

Returned nodes: TEXT DIV TEXT UL ...... SCRIPT ...more stuff... will not be returned, at the moment of the script execution the browser did not read it yet, so the "more stuff" is not returned

Question 68

.childNodes looks like an array, but is actually a ...

Answer 68

collection - a special array-like iterable object

Question 69

.childNodes looks like an array or a collection (a special array-like iterable object) ?

Answer 69

Collection!

Question 70

Why can´t you replace a child by something else assigning childNodes[i] = ...

Answer 70

Becase collections are read-only Changing the DOM needs other methods

Question 71

If we keep a reference to elem.childNodes, and add/remove nodes into the DOM, they appear in the collection automatically? Why?

Answer 71

YES, they appear automatically Because almost all DOM collections with minor exceptions are live. They reflect the current state of DOM