Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

JS para WP > 1.3.5 - Getting and Settings DOM Node Values > Flashcards

1.3.5 - Getting and Settings DOM Node Values Flashcards

1
Q

Which properties do we have for getting and setting Elements Nodes

A

.innerHTML

.innerText

.textContent

.outerHTML

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Which properties do we have for getting and setting Text Nodes

A

.data

.nodeValue

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

.innerHTML for what is used?

Element Nodes or Text Nodes

A

Element Nodes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

.innerText for what is used?

Element Nodes or Text Nodes

A

Element Nodes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

.textContent for what is used?

Element Nodes or Text Nodes

A

Element Nodes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

.outerHTML for what is used?

Element Nodes or Text Nodes

A

Element Nodes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

.data for what is used?

Element Nodes or Text Nodes

A

Text Nodes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

.nodeValue for what is used?

Element Nodes or Text Nodes

A

Text Nodes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

.innerHTML What returns?

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

.innerHTML what returns?

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

A

YES

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

.innerHTML what returns?

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

A

NO

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

.innerHTML what return?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

.innerHTML

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

A

YES, it changes the DOM

NO, it not change the source code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

.innerHTML

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

A

To append the content, into a new variable like:

var newVar = ‘title’;

newVar += ‘More content’;

contenido.innerHTML = newVar;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

.innerHTML

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

A

YES

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

.innerHTML

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

A

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

div, span, noembed

returned characters:

&amp, &lt, &gt

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

.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:

&, <, >

A

We can use .textContent

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

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

div, span, noembed

that has child text node, that includes the characters:

&, <, >

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

.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

A

YES

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

.innerText?

Returns …, without formatting and markups.

A

Returns all the text, without formatting and markups

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

.innerText?

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

A

NO

It will return all the text, without formatting and markups

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

.innerText

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

.innerText?

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

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

What will be the output?

A

YES

output: text/HTML

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

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

A

YES it takes styles into consideration

It means that, it won´t get hidden text for instance.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

.textContent

Returns all the content without interfering with css rules?

A

YES

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

.textContent

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

A

returns null

document.textContent // null

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

.textContent

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

A

document.documentElement.textContent

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

.textContent

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

A

returns the text inside this node

30
Q

.textContent what will return?

A

get the content of all elements, including script and style elements

and all its descendants

31
Q

.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?

A

YES

32
Q

.textContent

It removes all the children and do what?

A

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

33
Q

.textContent

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

A

YES

34
Q

.textContent, What it does when setting content?

A

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

35
Q

.innerText is aware of CSS styling?

What will do with hidden elements?

A

Yes it´s aware of css styling

DON´T return the text of hidden elements.

36
Q

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

innerText or textContent

A

textContent

37
Q

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?

A

YES

38
Q

Reflow in simple terms is:

recom…

A

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

39
Q

Reflowing is very expensive, or not to performance?

A

YES IT is

40
Q

Who will trigger REFLOW, innerText or textContent?

and Why?

A

innerText will trigger reflow.

Becase is aware of CSS styling.

41
Q

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

A

use textContent

42
Q

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

A

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

43
Q

when retrieving or writing text within an element, which one of these properties has better performance:

.innerHTML or .textContent

and why?

A

textContent

Because the text is not parsed as HTML

44
Q

which property will prevent a xss attack?

A

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

45
Q

.outerHTML return?

Returns the markup and content, including the descendants…

also, it includes the wrapper tag of the selection, or not?

A

Yes, it includes the wrapper tag of the selection

46
Q

.outerHTML returns…

HTML …., including the … and the ….

A

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

47
Q

.outerHTML returns what?

A

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

48
Q

.outerHTML setting

can you append to the property itself?

A

NO

49
Q

.outerHTML setting

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

A

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

50
Q

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

A

YES, the wrapper itself and its descendants

51
Q

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

A

will throw a DOMException with an error

52
Q

.outerHTML setting

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

A

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

53
Q

.outerHTML what will set?

A

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

54
Q

.data .nodeValue

Will get / set almost the same result?

A

yes

55
Q

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

A

when dealing with attributes values

56
Q

When dealing with attributes what will return .data?

It is consistent across text values and attribute values?

A

undefined

NO, it´s not consistent

57
Q

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

it is consistent?

A

returns the actual result of the attribute

It is more consistent

58
Q

Imagine an element-only navigation

imagine:

parent, siblings childrens (properties to access them)

A
59
Q

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

A

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

60
Q

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

A

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

61
Q

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

A

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

62
Q

Which one is faster

.nodeValue or .innerHTML?

and why?

A

nodeValue

.innerHTML parse HTML that´s why it takes longer

63
Q

Which one parse text and which one uses straight text, .innerHTML or .textContent

What are they outputs?

A

.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

64
Q

.innerText, takes styles into consideration?

A

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

65
Q

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

A

SI

66
Q

En el DOM, que significa la palabra “null”

A

que no existe

67
Q

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?

A

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

68
Q

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

A

collection - a special array-like iterable object

69
Q

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

A

Collection!

70
Q

Why can´t you replace a child by something else assigning

childNodes[i] = …

A

Becase collections are read-only

Changing the DOM needs other methods

71
Q

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

Why?

A

YES, they appear automatically

Because almost all DOM collections with minor exceptions are live. They reflect the current state of DOM

JS para WP (9 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions