Brainscape's Knowledge GenomeTM

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


See full index

c0123-code > JavaScript DOM > Flashcards

JavaScript DOM Flashcards

1
Q

Why do we log things to the console?

A

To make sure the script is loading properly and to see what we are selecting

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

What is a “model”?

A

A “model” is the DOM tree stored in the browser’s memory which houses all the nodes of the web page: most commonly the document node, element nodes, attribute nodes, and text nodes

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 document node, or the HTML 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

It refers to the face that the model (the DOM tree) is made of objects

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

What is a DOM Tree?

A

A model of the web page that has every element, attribute, and piece of text in the HTML represented by its own DOM node

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

document.getElementById() and document.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

document.getElementsByClassName(), document.getElementsByTagName(), and document.querySelectorAll()

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

If you need to use the same element(s) more than once, so by using a variable, you can store the location of the element(s) which saves the browser looking through the DOM tree to find the same element(s) again. This is knows as “caching” the selection

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

console.dir()

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

Why would a 

 tag need to be placed at the bottom of the HTML content instead of at the top?
A

So that the page exists and is loaded before subjecting it to DOM manipulation

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

It takes a css selector as a string as its argument and 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 does document.querySelectorAll() take as its argument and what does it return?

A

It takes a css selector as a string as its argument and returns all of those that match

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

Why do we log things to the console?

A

To make sure things are as we expect them to be

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

What is the purpose of events and event handling?

A

Events specify how the user is interacting with the browser and what’s in it.
Event handling “handles” what happens when an event is triggered, usually triggering some JavaScript code, and has 3 steps: 1. selecting the element node(s) you want the script to respond to 2. indicating which event on the selected node(s) will trigger the response 3. state the code you want to run when the event occurs

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

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

A

.addEventListener()

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

What is a callback function?

A

A callback function is 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

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

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

A

The event object

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

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

A

It is the target property of the event object. You would check it by console.log(event.target)

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

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

A

When the interpreter sees the parentheses after a function call, it runs the code straight away, so you want to use the first snippet of code, unless the function needs some information (arguments) to do its job

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

What is the className property of element objects?

A

The className property of the Element interface gets and sets the value(s) of the class attribute of the specified element.

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

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

A

.className =

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

What is the textContent property of element objects?

A

The textContent property of the Node interface represents the text content of the node and its descendants.

24
Q

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

A

.textContent =

25
Q

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

A

Always useful, not always required or necessary

26
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

27
Q

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

A

If you need to use the same element(s) more than once, so by using a variable, you can store the location of the element(s) which saves the browser looking through the DOM tree to find the same element(s) again. This is knows as “caching” the selection. Never depend on the DOM tree as it’s dynamic and changing

28
Q

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

A

The focus event

29
Q

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

A

The blur event

30
Q

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

A

The input event (the change event fires)

31
Q

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

A

The submit event

32
Q

What does the event.preventDefault() method do?

A

It prevents the browser from automatically reloading the page with the form’s values in the URL and other default actions.

33
Q

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

A

The browser will automatically reload the page with the form’s values in the URL

34
Q

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

A

form.elements

35
Q

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

A

form.elements[i].value

36
Q

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

A

You won’t know if, when, or where something is wrong. Makes debugging much harder

37
Q

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

A

You can check as you write that things are working as expected in real time

38
Q

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

A

No

39
Q

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

A

.appendChild()

40
Q

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

A

name and value. A string specifying the name of the attribute whose value is to be set and A string containing the value to assign to the attribute

41
Q

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

A
  1. create the element
  2. give it content
  3. add it to the DOM
42
Q

What is the textContent property of an element object for?

A

Checking and setting the text content of an element

43
Q

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

A

.className and .setAttribute()

44
Q

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

A
  1. It is suited to changing one element from a DOM
    fragment where there are many siblings.
  2. It does not affect event handlers.
  3. It easily allows a script to add elements
    incrementally (when you do not want to alter a lot
    of code at once).

It’s reusable

45
Q

What is the event.target?

A

target property of the event object. It shows the most specific element interacted with in reference to the event object

46
Q

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

A

Event bubbling: The event starts at the most specific node and flows outwards to the most specific one

47
Q

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

A

event.target.tagName or event.target.nodeName

48
Q

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

A

It takes a CSS selector as its argument and returns the closest node that matches the specified CSS selector outwards (ancestor)

49
Q

How can you remove an element from the DOM?

A

The .remove() method or .removeChild() method

50
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

By adding just one event listener its container parent element

51
Q

What is the event.target?

A

target property of the event object. It shows the most specific element interacted with in reference to the event object

52
Q

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

A

It “hides” it and doesn’t show up in the display window and removes it from the document flow

53
Q

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

A

It takes CSS selectors as an argument and returns a boolean of whether the element matches the selectors or not

54
Q

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

A

The getAttribute() method of the Element interface returns the value of a specified attribute on the element

55
Q

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

A

All the steps and in between

56
Q

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

A

Target each individual child instead of one parent

57
Q

If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

A

Lots of if else statements

c0123-code (16 decks)

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