Brainscape's Knowledge GenomeTM

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


See full index

Web Development > DOM > Flashcards

DOM Flashcards

1
Q

What is the DOM?

A

a model that represents the HTML document as Javascript object data type.

Javascript Object that is modeling a HTML document’s content

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

What is a DOM tree?

A

includes all the configurations(attributes) and contents(text & child elements) of the element

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

what is querySelector()? What does it take as its argument?

A

retrieves one element from DOM
(string = CSS selector) = first matching element
searches within any DOM element! NOT just for document object!
ex) any object.querySelector(‘p’) = nested p element inside the any object

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

querySelectorAll(); What does it take as its argument and what does it return?

A

retrieve multiple elements from DOM
(string = CSS selector) as argument and returns a node list (not a DOM element just a way to group DOM elements) of all matching DOM elements

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

Why assign the return value of a DOM query to a variable?

A

to save time and energy (if calling a element that won’t change multiple times) if element might change in the future, may need to recall

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

Why would a script tag need to be placed on the bottom of the HTML content instead of at the top?

A

the HTML elements must exist before creating the DOM tree, since the HTML elements are what JS needs to create the DOM!

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

What is a dir method? aka directory method?

A

to see the meticulous details and all the data attached to the DOM element

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

variable with a $?

A

ONLY when it holds a DOM element as its value

NOT a value pulled from calling a DOM element aka text from calling a DOM element

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

Why do we log things to the console when we use dom-events?

A

to check if the event fired

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

What is the purpose of events and events handling?

A

events = things that happen in the browser (usually user driven not always)
event handling = developers way to set up a list of actions that will happen in response to the event

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

Are all possible parameters required to use a javascript method or function?

A

No
ex) last parameter in addEventHandler()
and splice()
and more

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

useCapture?

A

if not specified = default to false
uses bubbling which uses normal flow of descendants out to ancestors
ex) gives event to all ancestor elements where the element with the event was encased

if specified to true
uses capture which goes in to descendants
ex) gives event to all child element within the element with event

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

addEventListener() is called off of which object?

A

any DOM element

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

What object is passed into an event listener callback when the event fires?

A

the event object = which has all the data about the event that occurred
given by JavaScript

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

What is the event.target?

A

it is the target property of the event object that tells us where (DOM element) the event STARTED!
it is not necessarily the element that I put the event listener ON! Due to bubbling, the event could start inside the child of the DOM element that has the event listener.

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

What is the className property of element objects?

A 
get or set CLASS NAME not CSS selector value of an element
property with the css class name of the DOM element

element.className = ‘newName’
or
element.className; return ‘current class’

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

What is the textContent property of an element object for?

A

get or set text content value of an element

property with all the text content of the DOM element

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

Why is storing info about program in var better than only storing in DOM?

A

getting info from DOM only to manipulate it with JS and then place it back into the DOM is more work!
storing data somewhere else makes work harder!
STORE DATA that needs JS to manipulate it, IN JS!

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

event.target

A

We get direct reference to where the event is starting/fired!
ex) multiple buttons

target is a property of the event object that stores all the information about the DOM element where the event fired from!

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

What event is fired when a user places their cursor in a form control?

A

focus

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

What event is fired when a user’s cursor leaves a form control?

A

blur

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

What event is fired when user changes value of form control?

A

input

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

What event is fired when user clicks the “submit” button within a form element?

A

submit
submit event listener should always be on the FORM element!
NOT form control element!

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

What does event.preventDefault() do?

A

prevents default behavior of an event

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

What does submitting a form without event.preventDefault() do?

A

It refreshes/reloads the page with the form’s values in the URL (due to outdated action attribute that without a URL to send the data to, it would reload the page and send the data to the current page, which is simply refreshing the page + reloading means current data is LOST)

reset() = in the same session, therefore data inside the input is still available

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

forms collection vs elements collection?

A

forms collection = reference to each of the form elements (useful if there are multiple forms on the page)
elements collection = holds all of the form controls within the form (accessed by index number or value of name attribute)

27
Q

What property of a form element object contains all of the form’s controls?

A

elements collection

ex) access the second form and first first form control within it:
document. forms[1].elements[0];
document. forms[0].elements.name
* using index numbers to access forms or elements can be dangerous since change of order in the HTML will mess up everything!

28
Q

What property of a form control object gets and sets its value?

A

value

29
Q

Does the document.createElement() insert a new element into the page?

A

NO

creates a node, but is not connected to the DOM yet

30
Q 
append() vs. appendChild ()?
vs insertBefore()?
A 
append = can append multiple nodes and strings
appendChild = limited to one
insertBefore = takes 2 arguments + append before the specified element
31
Q

What do we pass as the argument to the element.setAttribute() method?

A

2 strings = name of attribute , value

*whatever is assigned as an attribute (in JS) becomes a string as its type of element!

32
Q

Steps to insert a new element into the page

A

create the new element
query for the parent element
append the created element as a child to the queried parent element

33
Q

What is the textContent property of an element object for?

A

represents the text content of the node and its descendants

get/set the text content of the node and its descendants

34
Q

2 ways to set class attribute of a DOM element

A
  1. setAttribute() = method
  2. className = property
  3. classList = property that returns DOMTokenList that has methods such as add(), remove(), replace(), toggle()
    https: //developer.mozilla.org/en-US/docs/Web/API/Element/classList
35
Q

What DOM element property tells you what type of element it is?

A

.tagName

.nodeName is a looser version of this

36
Q

element.closest()

A 
takes the CSS classname as the argument and returns the closest ancestor
***digs outward***
while querySelector() digs inward
37
Q

What is the affect of setting an element to display: none?

A

removed from the document flow entirely

still in the program but not visible

38
Q

element.matches() method

A

call it off an DOM element with the CSS selector as the argument
will return a boolean value as result

39
Q

What does DOM allow us to do?

A

It specifies how browsers should create a model of an HTML page, and how JS can access and update the contents of a web page while it is in the browser window
ex) changes in the browser without navigating to another page (submit buttons that bring up success modal)

40
Q

Are attribute nodes a child of the element that carries them?
ex) h1 – attribute
|
text

A

No! They are a part of the element. Once accessed to the specific element, there are specific js methods and properties to read/change the element’s attributes

41
Q

Are text nodes a child of the element?

A

It is always a new branch of the DOM tree, but it CANNOT have children! ex) an em element inside a li element’s text does not mean it is a child of the text. Rather, it is a child of the li element.

42
Q

What are the 2 steps in accessing and updating the DOM tree?

A
  1. locate the node that represents the element you want to work with
  2. use its text content, child elements, and attributes
43
Q

Which “document” is being referred to in the phrase Document Object Model?

A

HTML

44
Q

What is the word “object” referring to in the phrase Document Object Model?

A

Javascript Object that is modeling a HTML document’s content

45
Q

Give two examples of document methods that retrieve a single element from the DOM.

A

getElementById(‘id’);
*No need for # since it assumes the argument will be an ID

querySelector(‘css selector’)

46
Q

Give one example of a document method that retrieves multiple elements from the DOM at once.

A

getElementsByClassName(‘class’) *faster

  • No need for . since it assumes the argument is class
    ex) ‘red-font’

getElementsByTagName(‘tagName’) * faster
ex) ‘li’

querySelectorAll(‘css selector’)
ex) ‘li.red-font’

47
Q

What console method allows you to inspect the PROPERTIES of a DOM element object?

A

console. dir(object)

* dir = directory

48
Q

When we store a DOM element inside a variable, what are we storing exactly?

A

the location/reference to where the node is in the DOM tree. NOT the element itself!

49
Q

if a method can return more than one node, it will always return ____?

A

nodelist = a collection of nodes (which has index numbers)
EVEN IF it only finds ONE matching element!
ex) getElementsByTagName()

50
Q

What is the return value of any query to the DOM with a wrong/non-existent element?

A

null

A great way to check by console.log()

51
Q

What is a nodelist?

A

an array-like object
lets us create a list of data that people can’t mess with easily
therefore no array methods can be applied only readable!
NOT adjustable!

52
Q

Why is innerHTML so dangerous?

A

anyone can hijack the authority as a web developer
since they can use the function that uses the innerHTML, pass in a string consisted of script element, and get all the return values!

53
Q

anonymous functions vs. named functions

A

anonymous functions are one time use

name functions are resusable

54
Q

What is a callback function?

A

a function passed as data into another function

55
Q

What is the difference between:

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

A

The first one runs the function when the event is fired

The second one calls the function when the interpreter reaches the line of code and does not include the event parameter

56
Q

How do you update the CSS class attribute of an element using JS?

A

className or setAttribute()

57
Q

How do you update the text within an element using JS?

A

textContent

58
Q

What is a classList property?

A

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

59
Q

dynamic DOM creation vs written in HTML document?

A

dynamic creation is always more resource intensive!!

don’t abuse it!

60
Q

What does it mean to delegate an event?

A

Leveraging event BUBBLING to respond to event that is ON its descendent elements!
It is delegating the event handler to a ancestor element instead of the element where the event is fired!
ex) delegating the event handler to a div that holds several buttons to respond when the button is clicked but only once the event bubbles out to the div, allowing us to create one event handler for multiple buttons!

61
Q

Why is it possible to listen for events on one element that actually happen in its descendent elements?

A

bubbling

62
Q

How can you remove an element from the DOM?

A

.remove()

63
Q

If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

A

Event delegation!

  • create a parent element that will hold the clickable DOM elements
  • add the event listener on the parent element
  • give each clickable elements different class names if they do different things(not preferable, just create a separate event listener) / one unified class name if they do the same thing(which is when we use DOM delegation)
  • create a condition to check if the event.target matches the DOM element/CSS selector that we want OR event.target.tagName === ‘CAPITALIZED type name”
    ex) event.target.matches(‘button’)
    ex) event.target.tagName === ‘BUTTON’
  • if it matches, proceed with code block
64
Q

How would a code comment which shows the HTML elements that will be created by DOM creation help a fellow coder?

A 
It is exactly the DOM tree format of the resulting HTML elements!
ex)
  /**
   * <li class="list-group-item">
   *   <div class="form-check d-flex">
   *     
   *     
   *       {todo.task}
   *     
   *   </div>
   * </li>
   */

Web Development (13 decks)

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