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

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

A

The HTML document.

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

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

A

The document object representing the HTML document.

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

What is a DOM Tree?

A

The tree structure formed by an element object and its descendants.

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

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

A

.getElementById() and .querySelector()

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

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

A

.querySelectorAll()

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

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

A

To reuse the object and save time rather than having .querySelector() search the document every time we need it.

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

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

A

console.dir()

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

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

A

Because all the elements need to be loaded first.

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

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

A

Takes a CSS selector string and returns the first matching element object.

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

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

A

Takes a CSS selector string and returns a NodeList of all matching nodes.

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

What is the purpose of events and event handling?

A

Event handling lets us make our pages dynamic.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
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
13
Q

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

A

.addEventListener(event, function)

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

What is a callback function?

A

A function passed as an argument to another function.

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

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

A

The argument given to the callback function is the event object.

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

Which element the event originated from. You could log it out to check, and go on MDN to find more information.

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

What’s the difference between handleClick and handleClick()?

A

handleClick is interpreted as a variable where the function is being called with handleClick()

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

What’s the difference between an Event Listener and Event Handler?

A

The Event Listener checks for events on the element it’s bound to and you don’t directly interact with it. The Event Handler function is passed as an argument to the .addEventListener() function to execute a code block when the event occurs.

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

What is the className property of element objects?

A

The className property stores a value that corresponds to the class attribute of the HTML element it represents.

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

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

A

Assign a new String of class name(s) to element.className

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

What is the textContent property of element objects?

A

The textContent property stores a value that corresponds to the text content present in an HTML element.

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

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

A

Assign a new String of text to element.textContent

23
Q

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

A

Nope

24
Q

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

A

Because otherwise you’d have to query and parse them every time you needed to use/update the information otherwise.

25
Q

What event is fired when a user clicks in a form control?

A

focus

26
Q

What event is fired when a user’s clicks out of a form control?

A

blur

27
Q

What event is fired as a user changes the value of a form control?

A

input

28
Q

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

A

submit

29
Q

What does the event.preventDefault() method do?

A

Tells the user agent that unless the event is explicitly handled the default action should not be taken as it normally would be.

30
Q

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

A

It refreshes the page and submits the form.

31
Q

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

A

The elements property.

32
Q

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

A

The value property.

33
Q

What is one risk of writing a lot of code without checking to see if it works so far?

A

It may break when you execute it and you’ll have trouble finding where it broke.

34
Q

What is an advantage of having your console open when writing a JavaScript program?

A

You can immediately see any red errors.

35
Q

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

A

No.

36
Q

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

A

$el.appendChild($child);

37
Q

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

A

$el.setAttribute(‘attribute-name’, ‘value’);

38
Q

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

A

Create a new element object, specify its attributes and give it text content if needed, and append the object as a child to the desired node.

39
Q

What is the textContent property of an element object for?

A

Getting and setting the text content of the element.

40
Q

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

A

reassign $el.className or use $el.setAttribute(‘class’, ‘value’);

41
Q

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

A

It makes creating the structure much faster than doing it manually and you can reuse the code if you want similar structures in the future.

42
Q

What is the event.target?

A

The event element on which the event took place.

43
Q

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

A

Because by default events bubble up the ancestor elements.

44
Q

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

A

$el.tagName

45
Q

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

A

The $el.closest() method takes a string containing a CSS selector as its argument and traverses the ancestor elements until it finds a matching element, returning it.

46
Q

How can you remove an element from the DOM?

A

$el.remove()

47
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

Add a single event listener to its common ancestor element.

48
Q

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

A

It hides and removes the element from the document flow completely, yielding its space to visible elements.

49
Q

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

A

$el.matches() takes a string containing a CSS selector as an argument and returns a Boolean indicating whether it not it matched the selector.

50
Q

How can you retrieve the value of an element’s attribute?

A

$el.getAttribute(‘attribute-name’);

51
Q

At what steps of the solution would it be helpful to log things to the console?

A

Every step!

52
Q

If you were to add another tab and view to your HTML (javascript-view-swapping exercise), but you didn’t use event delegation, how would your JavaScript code be written instead?

A

You would have to add an event listener to each of the tab elements individually.

53
Q

If you didn’t use a loop to conditionally show or hide the views in the page (javascript-view-swapping exercise), how would your JavaScript code be written instead?

A

You would have to write out the code to hide and reveal views based on the condition of which tab was clicked.

Web Development (11 decks)

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