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.08, 1.3.09 > Flashcards

1.3.08, 1.3.09 Flashcards

1
Q

window.getComputedStyle( el [,pseudoElement] )

Is it true that it gives the actual values of all the CSS properties of an element?

A

YES

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

window.getComputedStyle is the style actually used in displaying the element, after “stylings” from multiple souces have been applied?

A

YES

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

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

???

A

YES

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

What window.getComputedStyle(element [,pseudoElement])

do?

A

It gets the actual values of all the CSS properties of an element, after applying the active stylesheets and resolving any basic computation

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

When using window.getComputedStyle(element [,pseudoElement]) the styles from where it get the actual values, after applying any basic computation, could be sources from ??

A

Style sources can include:

internal style sheets

external style sheets

inherited styles and browser default styles

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

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

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

Para que nos conviene usar .style.

para setear un style o para obtener un style?

A

Según la forma en la que usemos .style, pero en gral podemos decir que es mejor usarlo para setear propiedades

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

Porque es que

la propiedad style no es útil para obtener un style determinado?

Y que es mejor usar?

A

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()

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

Si hacemos esto con la propiedad style, va a reemplazar o añadir a la inline style?

element.style.cssText = ‘color: black’;

A

Reemplazar

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

Si hacemos esto con la propiedad style, va a reemplazar o añadir a la inline style?

element.style.color = ‘black’;

A

Añadir

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

Si hacemos esto con la propiedad style, va a reemplazar o añadir a la inline style?

element.style = ‘color: black’;

A

Reemplazar

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

La propiedad .style. cuando la usamos para setear, agrega en forma inline?

A

SI

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

It´s true that we can use document.createTextNode( ‘value’ )

To create text nodes

A

Yes

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

How can we create text nodes?

A

using document.createTextNode( ‘value’ )

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

For creating new elements, we can use

document.createElement( ‘div’ )

A

YES

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

What method can we use to create new elements

A

document.createElement( ‘div’ )

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

With el.appendChild( childNode ) we can add a node to the end of the list of children of a specified parent node?

A

YES

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

What can we use to add a node to the end of the list of children of a specified parent node?

A

element.appendChild( childNode )

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

What will happend when using

element.appendChild ( childNode )

if the given child (childNode) is a reference to an existing node in the document?

A

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)

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

When dealing with

element.appendChild( childNode )

a node can be in 2 positions of the document simultaneously?

A

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

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

Document Fragment:

is a container for holding nodes?

A

YES

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

What happend when we append a document fragment to another node?

A

It disappears and just the children nodes you have added are present

(the ones that previously added to the document fragment)

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

What is a document fragment?

A

A container for holding nodes

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

How can we create a document fragment?

A

using

document.createDocumentFragment()

25
Q

Describe the process in plain english /and in code of

  • creating a text, an element, and add it to the dom
A

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)

26
Q

What can we use to:

replace a child

insert before and after

A

replace: replaceChild()
before: insertBefore()
after: insertBefore() - using nextSibling

27
Q

In

var insertedNode = parentNode.insertBefore( newNode, referenceNode );

insertedNode is: The node being inserted, that is newNode

A

YES

28
Q

In

var insertedNode = parentNode.insertBefore( newNode, referenceNode );

parentNode: is the parent of the newly inserted node?

A

YES

29
Q

In:

var insertedNode = parentNode.insertBefore( newNode, referenceNode );

newNode: is the node to be inserted?

A

YES

30
Q

In:

var insertedNode = parentNode.insertBefore( newNode, referenceNode );

referenceNode: the node before which newNode is inserted

A

YES

31
Q

describe every part of:

var insertNode = parentNode.insertBefore( newNode, referenceNode )

A

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

32
Q

In:

var insertedNode = parentNode.insertBefore( newNode, referenceNode );

What happens if referenceNode is null

A

the newNode is inserted at the end of the list of child nodes

33
Q

In:

var insertedNode = parentNode.insertBefore( newNode, referenceNode );

referenceNode it is or is not an optional parameter, and why?

A

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.

34
Q

In

var insertedNode = parentNode.insertBefore( newNode, referenceNode );

what is the returned value?

A

The returned value is the inserted node

35
Q

How can we use insertBefore to insert after a child?

A

using nextSibling property

parentDiv.insertBefore( newNode, referenceNode.nextSibling )

36
Q

When using

replaceNode = parentNode.replaceChild( newChild, oldChild );

newChild is the new node to replace oldChild?

A

YES

37
Q

When using

replaceNode = parentNode.replaceChild( newChild, oldChild );

oldChild: is the existing child to be replaced?

A

YES

38
Q

When using:

replaceNode = parentNode.replaceChild( newChild, oldChild );

replaceNode: is the replaced node. This is the same node as oldChild?

A

YES

39
Q

When using:

replaceNode = parentNode.replaceChild( newChild, oldChild );

What is newChild?, and what happens if it already exists in the DOM?

A

newChild is the new node to replace oldChild, if it already exists in the DOM it is first removed

40
Q

When using:

replaceNode = parentNode.replaceChild( newChild, oldChild );

What is oldChild?

A

oldChild: is the existing child to be replaced

41
Q

When using:

replaceNode = parentNode.replaceChild( newChild, oldChild );

what is replaceNode?

A

replaceNode: is the replaced node. This is the same node as oldChild

42
Q

When using:

replaceNode = parentNode.replaceChild( newChild, oldChild );

What happend if newChild not exists?

A

It will return an error, we must be sure that the element exist.

43
Q

Describe every part of:

reference = parentDiv.replaceChild(sp1, sp2);

A

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

44
Q

Describe every part of:

reference = div.insertBefore(sp1, sp2);

A

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

45
Q
  • var dupNode = node.cloneNode( deep )*
  • What is the purpose of .cloneNode*
A

Returns a duplicate of the node on which this method was called

46
Q

In:

var dupNode = node.cloneNode( deep )

describe every step of the process

A

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

47
Q

When cloning a node with cloneNode, what happens with attributtes and their values?

A

They get copied too

48
Q

When cloning a node with cloneNode, the duplicate node that is returned is part of the document already?

A

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.

49
Q

How can we copy or clone a node?

and describe every part of the process

A

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

50
Q

How can we clone a node , and not copy the childrens of that node

A

node.cloneNode( false )

51
Q

How can we clone a node, and their childrens?

A

var dupNode = node.cloneNode( true )

52
Q

element.remove()

What it does?

A

removes the object from the tree it belongs to

53
Q

What it does

var oldChild = node.removeChild( child )

A

removes a child node from the DOM, and returns the removed node

54
Q

Describe everything in:

var oldChild = node.removeChild( child )

A

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

55
Q

using

var oldChild = node.removeChild( child )

What happens to the removed child?

A

It till exist in memory, but is no longer part of the DOM

56
Q

What happens in:

var oldChild = node.removeChild( child )

if child is not actually a child of node

A

the method throws an exception error

57
Q

How can we remove a node?

A

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

58
Q

What are the main differences between

el.remove()

and

var oldChild = node.removeChild( child )

A

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

JS para WP (9 decks)

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