DOM Flashcards

1
Q

Why do we log things to the console?

A

to know what the code is doing

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

What is a “model”?

A

representation of something;

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

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

A

the entire page

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

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

A

data types, collection of data

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

What is a DOM Tree?

A

all the nodes of the elements

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

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

A

.getElementByID()
.querySelector()

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

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

A

.getElementsByClassName()

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

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

A

so the location of the value is saved and JS doesn’t have to find it again

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

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

A

.dir()

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

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

A

HTML needs to load first because JS needs to know what to work with

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

What does document.querySelector() take as its argument and what does it return?

A

takes in a CSS selector,
returns the first match of the selector

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

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

A

takes in a CSS selector, returns the all the matches of the selector in a node list

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

What is the purpose of events and event handling?

A

user interaction

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

What do [] square brackets mean in function and method syntax documentation?

A

they’re optional

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

What is a callback function?

A

a function passed into another function as an argument

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

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

A

the element that the event handler/listener is applied to

17
Q

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

A

event name & function ?

18
Q

What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())

A

first - event is fired when clicked
second - event is fired at run time

19
Q

What is the className property of element objects?

A

list of strings with all the class names of the element
changes the class name of elements

20
Q

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

A

.className

21
Q

What is the textContent property of element objects?

A

can change text content in an element

22
Q

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

A

.textContent

23
Q

Is the event parameter of an event listener callback always useful?

A

no

24
Q

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

A

more complicated

25
Q

Why is storing information about a program in variables better than only storing it in the DOM?

A

incase of future uses

26
Q

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

A

no it just creates one

27
Q

How do you add an element as a child to another element?

A

element.appendChild(elementYouWantAdded)

28
Q

What do you pass as the arguments to the element.setAttribute() method?

A

(name, value)

29
Q

What steps do you need to take in order to insert a new element into the page?

A
  1. Create element node
  2. Create text node
  3. Add text node to element node
    or
  4. Add textContent to node
  5. Add element to dom tree
30
Q

What is the textContent property of an element object for?

A

represents the text content of the node and its descendants

31
Q

Name two ways to set the class attribute of a DOM element.

A
  1. .className
  2. .setAttribute(class, value)
32
Q

What are two advantages of defining a function to create something (like the work of creating a DOM tree)?

A
  1. It can create the tree with a lot of elements in one go instead of manually inputting
  2. reduces human error like spelling mistakes
33
Q

What is the event.target?

A

whatever part of the document I am clicking on

34
Q

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

A

bubbling

35
Q

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

A

.tagName

36
Q

What does the element.closest() method take as its argument and what does it return?

A

argument - selectors
returns closest ancestor element

37
Q

How can you remove an element from the DOM?

A

elementName.remove()

38
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

apply event listener to the parent element