DOM Flashcards

1
Q

Why do we log things to the console?

A

Powerful tool for debugging and an easy way to inspect your variables in the browser

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

What is a “model”?

A

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

HTML document

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

A JavaScript object modeling the HTML document’s content

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

What is a DOM Tree?

A

Tree structure of nested nodes (element, text, comment), like a family tree that shows the relationship between parents, children, and siblings.

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

Give two examples ofdocumentmethods that retrieve a single element from the DOM.

A

querySelector() - uses a CSS selector, and returns the first matching element

getElementById() - uses the value of an element’s id attribute (which should be unique within the page)

**querySelector() only one needed, consistency

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

Give one example of adocumentmethod that retrieves multiple elements from the DOM at once.

A

querySelectorAll() - uses a CSS selector to select all matching elements

getElementsByClassName() - selects all elements that have a specific value for their class attribute
getElementsByTagName() - selects all elements that have the specified tag name
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

Caching the selection - If your script needs to use the same element(s) more than once, you can store the location of the element(s) in a variable
Storing the location of the element(s) within the DOM tree in a variable

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

Whatconsolemethod allows you to inspect the properties of a DOM element object?

A

console.dir() - displays an interactive list of the properties of the specified JavaScript object, the output is presented as a hierarchical listing with disclosure triangles that let you see the contents of the child objects

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

Why would atag need to be placed at the bottom of the HTML content instead of at the top?

A

The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them

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

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

A

A string containing a CSS selector syntax that would select one or more elements
Returns only the first of the matching elements

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

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

A

A string containing CSS selector syntax to select one or more elements
Returns all of those that match in a NodeList (array-like object)

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

Events -an action that occurs as a result of the user or another source, like a mouse click
Event handing - a routine that deals with the event, allowing a programmer to write code that is executed when the event occurs

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

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

A

No

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

What method of element objects lets you set up a function to be called when a specific type of event occurs?

A

addEventListener(type, listener, options);

addEventListener(type, listener, useCapture);

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

What is a callback function?

A

A function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action

17
Q

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

A

Event object - creates an object from scratch in the moment that contains all the data about that event, unique data about a specific occurrence organized as an object for ease of access to data about that event

18
Q

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

A

The read-only target property of the Event interface is a reference to the object onto which the event was dispatched, where the event originated
Console.log and inspect or MDN

19
Q

What is the difference between these two snippets of code?

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

A

handleClick is a callback function that will execute when the event happens
handleClick() executes when that line is parsed and returns a value with no arguments

20
Q

What is theclassNameproperty of element objects?

A
Property containing the value of the class attribute on that element
Gets and sets the value of the class attribute of the specified element
21
Q

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

A

element.className = newValue

22
Q

What is thetextContentproperty of element objects?

A

Property that contains the text content of the element

Represents the text content of the node and its descendants

23
Q

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

A

element.textContent = newTextContent

24
Q

Is theeventparameter of an event listener callback always useful?

25
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
Complicated | You would have to access the text content in .click-count then split string to access the numeric data
26
Why is storing information about a program in variables better than only storing it in the DOM?
Better to use data in the same language you are working in | Ease of access for repeated use
27
Does the document.createElement() method insert a new element into the page?
No. When the element node is created, it is not yet part of the DOM tree
28
How do you add an element as a child to another element?
parentEl.appendChild(childEl);
29
What do you pass as the arguments to the element.setAttribute() method?
Name - a string specifying the name of the attribute whose value is to be set Value - a string containing the value to assign to the attribute
30
What steps do you need to take in order to insert a new element into the page?
Create new element and store it in a variable | .createElement() Create a text node and store it in a variable | .createTextNode() Attach the new text node to the new element | .appendChild() Find the position where the new element should be added and store it in a variable | .querySelector() Insert the new element into its position | .appendChild()
31
What is the textContent property of an element object for?
To get and set the text content for the element
32
Name two ways to set the class attribute of a DOM element.
Element.className | Element.setAttribute(name, value)
33
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
Reusable: use functions more than once and use in different context
34
What is the event.target?
A reference to the object onto which the event was dispatched (originated) from
35
Why is it possible to listen for events on one element that actually happen on its descendent elements?
Event bubbling
36
What DOM element property tells you what type of element it is?
event.tagName
37
What does the element.closest() method take as its argument and what does it return?
Selectors - a string of valid CSS selector to match the element and its ancestors against it Returns - the closest ancestor element or itself, which matches the selectors, if there are no such element, null
38
How can you remove an element from the DOM?
Element.remove() | No parameters, no return value (undefined)
39
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?
Add an event listener to the nearest parent