1.3.08, 1.3.09 Flashcards
window.getComputedStyle( el [,pseudoElement] )
Is it true that it gives the actual values of all the CSS properties of an element?
YES
window.getComputedStyle is the style actually used in displaying the element, after “stylings” from multiple souces have been applied?
YES
When using window.getComputedStyle
Style sources of the actual values that this method returns, can include:
Internal style sheets
External Style sheets
Inherited styles and browser default styles
???
YES
What window.getComputedStyle(element [,pseudoElement])
do?
It gets the actual values of all the CSS properties of an element, after applying the active stylesheets and resolving any basic computation
When using window.getComputedStyle(element [,pseudoElement]) the styles from where it get the actual values, after applying any basic computation, could be sources from ??
Style sources can include:
internal style sheets
external style sheets
inherited styles and browser default styles
Picture a function dumpComputedStyles that takes two parameters, the element and a property(optional)
If no property is passed as an argument to the function dumpComputedStyles, the function will display all their properties values
Para que nos conviene usar .style.
para setear un style o para obtener un style?
Según la forma en la que usemos .style, pero en gral podemos decir que es mejor usarlo para setear propiedades
Porque es que
la propiedad style no es útil para obtener un style determinado?
Y que es mejor usar?
Porque representa únicamente la declaración CSS que se encuentra en el elemento en forma de “inline” mediante el atributo “style”
Por lo tanto, no va a representar las declaraciones de reglas CSS que procedan desde otros lugares como en
, archivos externos.
Es mejor usar window.getComputedStyle()
Si hacemos esto con la propiedad style, va a reemplazar o añadir a la inline style?
element.style.cssText = ‘color: black’;
Reemplazar
Si hacemos esto con la propiedad style, va a reemplazar o añadir a la inline style?
element.style.color = ‘black’;
Añadir
Si hacemos esto con la propiedad style, va a reemplazar o añadir a la inline style?
element.style = ‘color: black’;
Reemplazar
La propiedad .style. cuando la usamos para setear, agrega en forma inline?
SI
It´s true that we can use document.createTextNode( ‘value’ )
To create text nodes
Yes
How can we create text nodes?
using document.createTextNode( ‘value’ )
For creating new elements, we can use
document.createElement( ‘div’ )
YES
What method can we use to create new elements
document.createElement( ‘div’ )
With el.appendChild( childNode ) we can add a node to the end of the list of children of a specified parent node?
YES
What can we use to add a node to the end of the list of children of a specified parent node?
element.appendChild( childNode )
What will happend when using
element.appendChild ( childNode )
if the given child (childNode) is a reference to an existing node in the document?
appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node)
When dealing with
element.appendChild( childNode )
a node can be in 2 positions of the document simultaneously?
No, that´s why if the childNode exist in the document, it will remove it from the old position and appended to the new position
Document Fragment:
is a container for holding nodes?
YES
What happend when we append a document fragment to another node?
It disappears and just the children nodes you have added are present
(the ones that previously added to the document fragment)
What is a document fragment?
A container for holding nodes
How can we create a document fragment?
using
document.createDocumentFragment()
Describe the process in plain english /and in code of
- creating a text, an element, and add it to the dom
We need to create
- a text node with :
var text = document.createTextNode(‘text’)
- an element with
var div = document.createElement(‘div’)
- append the text node to the div:
div.appendChild(text)
- append the div to the body or other element:
document.body.appendChild(div)
What can we use to:
replace a child
insert before and after
replace: replaceChild()
before: insertBefore()
after: insertBefore() - using nextSibling
In
var insertedNode = parentNode.insertBefore( newNode, referenceNode );
insertedNode is: The node being inserted, that is newNode
YES
In
var insertedNode = parentNode.insertBefore( newNode, referenceNode );
parentNode: is the parent of the newly inserted node?
YES
In:
var insertedNode = parentNode.insertBefore( newNode, referenceNode );
newNode: is the node to be inserted?
YES
In:
var insertedNode = parentNode.insertBefore( newNode, referenceNode );
referenceNode: the node before which newNode is inserted
YES
describe every part of:
var insertNode = parentNode.insertBefore( newNode, referenceNode )
insertedNode: The node being inserted that is newNode
parentNode: The parent of the newly inserted node
newNode: The node to be inserted
referenceNode: The node before which newNode is inserted
In:
var insertedNode = parentNode.insertBefore( newNode, referenceNode );
What happens if referenceNode is null
the newNode is inserted at the end of the list of child nodes
In:
var insertedNode = parentNode.insertBefore( newNode, referenceNode );
referenceNode it is or is not an optional parameter, and why?
is not an optional parameter – you must explicitly pass a node or null. Failing to provide it or passing invalid values may behave differently in different browser versions.
In
var insertedNode = parentNode.insertBefore( newNode, referenceNode );
what is the returned value?
The returned value is the inserted node
How can we use insertBefore to insert after a child?
using nextSibling property
parentDiv.insertBefore( newNode, referenceNode.nextSibling )
When using
replaceNode = parentNode.replaceChild( newChild, oldChild );
newChild is the new node to replace oldChild?
YES
When using
replaceNode = parentNode.replaceChild( newChild, oldChild );
oldChild: is the existing child to be replaced?
YES
When using:
replaceNode = parentNode.replaceChild( newChild, oldChild );
replaceNode: is the replaced node. This is the same node as oldChild?
YES
When using:
replaceNode = parentNode.replaceChild( newChild, oldChild );
What is newChild?, and what happens if it already exists in the DOM?
newChild is the new node to replace oldChild, if it already exists in the DOM it is first removed
When using:
replaceNode = parentNode.replaceChild( newChild, oldChild );
What is oldChild?
oldChild: is the existing child to be replaced
When using:
replaceNode = parentNode.replaceChild( newChild, oldChild );
what is replaceNode?
replaceNode: is the replaced node. This is the same node as oldChild
When using:
replaceNode = parentNode.replaceChild( newChild, oldChild );
What happend if newChild not exists?
It will return an error, we must be sure that the element exist.
Describe every part of:
reference = parentDiv.replaceChild(sp1, sp2);
reference: is the replaced node. This is the same node as sp2
parentDiv: Is the parent element of sp2
sp1: is the new node to replace sp2. If it already exists in the DOM, it is first removed
sp2: is the existing child to be replaced
Describe every part of:
reference = div.insertBefore(sp1, sp2);
reference: the node being inserted, that is sp1
div: The parent of the newly inserted node
sp1: the node to be inserted (the new node)
sp2: the node (old node) before which sp1 is inserted
- var dupNode = node.cloneNode( deep )*
- What is the purpose of .cloneNode*
Returns a duplicate of the node on which this method was called
In:
var dupNode = node.cloneNode( deep )
describe every step of the process
node: The node to be cloned
dupNode: the new node that will be a clone of the node
deep: (optional) true if the children of the node should also be cloned, or false to clone only the specified node. Default to false
When cloning a node with cloneNode, what happens with attributtes and their values?
They get copied too
When cloning a node with cloneNode, the duplicate node that is returned is part of the document already?
No, is not part of the document, until it is added to another node that is part of the document usin Node.appendChild(clonedNode) or a similar method. It also has not parent until is appended to another node.
How can we copy or clone a node?
and describe every part of the process
using
var dupNode = node.cloneNode( deep)
node: the node to be cloned
dupNode: the new node that will be clone of node
deep (optional) : true if the childrens of the node should also be cloned, or false to clone only the specified node. Default to false
How can we clone a node , and not copy the childrens of that node
node.cloneNode( false )
How can we clone a node, and their childrens?
var dupNode = node.cloneNode( true )
element.remove()
What it does?
removes the object from the tree it belongs to
What it does
var oldChild = node.removeChild( child )
removes a child node from the DOM, and returns the removed node
Describe everything in:
var oldChild = node.removeChild( child )
child: is the child node to be removed from the DOM
node: is the parent node of child
oldChild: holds a reference to the removed child node. oldChild === child
using
var oldChild = node.removeChild( child )
What happens to the removed child?
It till exist in memory, but is no longer part of the DOM
What happens in:
var oldChild = node.removeChild( child )
if child is not actually a child of node
the method throws an exception error
How can we remove a node?
with:
element.remove(): removes the object from the tree it belongs to
var oldChild = node.removeChild( child )
Removes a child from the DOM, and returns the removed node
What are the main differences between
el.remove()
and
var oldChild = node.removeChild( child )
.remove(): Will remove the element, and not return anything
.removeChild( child ): If we are assiging the returned value to a variable, we still has a reference to the removed node(the node that was removed)
