1.3.5 - Getting and Settings DOM Node Values Flashcards
Which properties do we have for getting and setting Elements Nodes
.innerHTML
.innerText
.textContent
.outerHTML
Which properties do we have for getting and setting Text Nodes
.data
.nodeValue
.innerHTML for what is used?
Element Nodes or Text Nodes
Element Nodes
.innerText for what is used?
Element Nodes or Text Nodes
Element Nodes
.textContent for what is used?
Element Nodes or Text Nodes
Element Nodes
.outerHTML for what is used?
Element Nodes or Text Nodes
Element Nodes
.data for what is used?
Element Nodes or Text Nodes
Text Nodes
.nodeValue for what is used?
Element Nodes or Text Nodes
Text Nodes
.innerHTML What returns?
returns all markup inside the …, without the … (it gets the descendant)
returns all markup inside the selected area, without the wrapper that we selected (it gets the descendant)
.innerHTML what returns?
all the markup inside the selected area, without the wrapper, and with their descendants?
YES
.innerHTML what returns?
It´s true to say that it will return the HTML markup with the wrapper that we select?
NO
returns all markup inside the selected area, WITHOUT the wrapper that we selected (it gets the descendant)
.innerHTML what return?
returns all markup inside the selected area, without the wrapper that we selected (it gets the descendant)
.innerHTML
When setting content, it change the DOM and the source code?
YES, it changes the DOM
NO, it not change the source code
.innerHTML
What is a good practice, when we are using .innerHTML for setting content, if we are appending a lot of content to it?
To append the content, into a new variable like:
var newVar = ‘title’;
newVar += ‘More content’;
contenido.innerHTML = newVar;
.innerHTML
It’s possible to append content directly on the property?
YES
.innerHTML
If we had which nodes … that has a child text node, that includes the characters &, <, >, will returns what characters?
the nodes that need to have a child text node are:
div, span, noembed
returned characters:
&, <, >
.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:
&, <, >
We can use .textContent
Why we need to use .textContent with nodes elements like:
div, span, noembed
that has child text node, that includes the characters:
&, <, >
Because if we use .innerHTML will return the characters &, <, >
.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
YES
.innerText?
Returns …, without formatting and markups.
Returns all the text, without formatting and markups
.innerText?
It is true that will return all the text with the proper formatting and markups?
NO
It will return all the text, without formatting and markups
.innerText
We can say that it’s like if the user do what?
Would highlight the content of the element with the cursor and then copied to the clipboard.
.innerText?
What happens when we have a css rule “display: none”
Using .innerText, that section will be ignored, not returned
.innerHTML parse content as HTML, and takes longer to run?
What will be the output?
YES
output: text/HTML
.innerText will take styles into consideration? what it means?
YES it takes styles into consideration
It means that, it won´t get hidden text for instance.
.textContent
Returns all the content without interfering with css rules?
YES
.textContent
If the element is a document, a docType, what it returns?
returns null
document.textContent // null
.textContent
to grab all text for the whole document we can use what?
document.documentElement.textContent
.textContent
if the data is CDATA section, comment, text node, what will return?
returns the text inside this node
.textContent what will return?
get the content of all elements, including script and style elements
and all its descendants
.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?
YES
.textContent
It removes all the children and do what?
Removes all of its children and replaces them with a single text node with the given value.
.textContent
It places a single text node with the given value, and replaces all?
YES
.textContent, What it does when setting content?
When setting, it will remove all of its children and relaces them with a single text node with the given value?
.innerText is aware of CSS styling?
What will do with hidden elements?
Yes it´s aware of css styling
DON´T return the text of hidden elements.
Who will return a hidden element, that was hidden with css?
innerText or textContent
textContent
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?
YES
Reflow in simple terms is:
recom…
recomputes the dimensions and positions of elements and positions, also of their childrens, and finally calls for a final repaint.
Reflowing is very expensive, or not to performance?
YES IT is
Who will trigger REFLOW, innerText or textContent?
and Why?
innerText will trigger reflow.
Becase is aware of CSS styling.
To avoid reflow what we need to use if we want to add text to a node?
use textContent
Often in order to retrieve or write text within an element, people use innerHTML, however …
.textContent often has better performance because the text is not parsed as HTML
when retrieving or writing text within an element, which one of these properties has better performance:
.innerHTML or .textContent
and why?
textContent
Because the text is not parsed as HTML
which property will prevent a xss attack?
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
.outerHTML return?
Returns the markup and content, including the descendants…
also, it includes the wrapper tag of the selection, or not?
Yes, it includes the wrapper tag of the selection
.outerHTML returns…
HTML …., including the … and the ….
HTML markup and content, including the descendants and the wrapper tag of the selection
.outerHTML returns what?
HTML markup and content, including the descendants and the wrapper tag of the selection
.outerHTML setting
can you append to the property itself?
NO
.outerHTML setting
What is better to append to a new variable or directly in the property itself?
To a new variable, we can´t append to the property itself
when using .outerHTML to set a value, it´s going to grab the entirely element and re-writing it completely?
YES, the wrapper itself and its descendants
.outerHTML if the element is the root element of the document, what will happend?
will throw a DOMException with an error
.outerHTML setting
What happens to the variable whose .outerHTML property was set?
While the element will be replaced, the variable whose .outerHTML property was set will still hold a reference to the original element
.outerHTML what will set?
The entirely element and completely re-write it, the wrapper element itself and his descendants
.data .nodeValue
Will get / set almost the same result?
yes
When we can see a difference when getting value of text nodes with .data and .nodeValue?
when dealing with attributes values
When dealing with attributes what will return .data?
It is consistent across text values and attribute values?
undefined
NO, it´s not consistent
When dealing with attributes values, what will return .nodeValue?
it is consistent?
returns the actual result of the attribute
It is more consistent
Imagine an element-only navigation
imagine:
parent, siblings childrens (properties to access them)
When we are setting the value of a text node, it´s better to set a conditional check, why is that?
Because we need to prevent to change the nodeValue of an element, we need to check if it´s really a text node type
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
We need to check with a conditional if the node it´s really a text node type, and not an element node
What will happend if we use .data or .nodeValue when setting the value of an Element node type
It will give us an error, and nothing will change.
Which one is faster
.nodeValue or .innerHTML?
and why?
nodeValue
.innerHTML parse HTML that´s why it takes longer
Which one parse text and which one uses straight text, .innerHTML or .textContent
What are they outputs?
.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
.innerText, takes styles into consideration?
Yes, it won´t get hidden text for instance.
En el DOM, la palabra null significa, “que no existe”?
SI
En el DOM, que significa la palabra “null”
que no existe
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?
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
.childNodes looks like an array, but is actually a …
collection - a special array-like iterable object
.childNodes looks like an array or a collection (a special array-like iterable object) ?
Collection!
Why can´t you replace a child by something else assigning
childNodes[i] = …
Becase collections are read-only
Changing the DOM needs other methods
If we keep a reference to elem.childNodes, and add/remove nodes into the DOM, they appear in the collection automatically?
Why?
YES, they appear automatically
Because almost all DOM collections with minor exceptions are live. They reflect the current state of DOM
