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 data type object in JavaScript
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is a DOM tree?

A
  • The DOM tree is the model of the HTML document stored as an object in JavaScript
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q
  • Give two examples ofdocumentmethods that retrieve a single element from the DOM.
A
  • Document.querySelector();

* Select element by id

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q
  • Give one example of adocumentmethod that retrieves multiple elements from the DOM at once.
A
  • document.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
  • So you can work with an element more than once
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q
  • Whatconsolemethod 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 ascript tag 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 JS code can access them.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q
  • What doesdocument.querySelector()take as its argument and what does it return?
A
  • A string, Css selector and it returns the first matching elements
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q
  • What doesdocument.querySelectorAll()take as its argument and what does it return?
A
  • A string, Css selector to select all matching elements and returns a NodeList
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Difference between Number.isNaN(); and isNan();

A

Number.isNaN returns true when the argument is a number and is NaN.
isNaN converts to a number and returns true when the resulting value is NaN

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q
  • What is the purpose of events and event handling?
A

They make our apps do stuff!

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

callback function

A

a function definition being passed in as an argument

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q
  • What object is passed into an event listener callback when the event fires?
A

The target of the object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q
  • What is theevent.target? If you weren’t sure, how would you check?
A

You can check in your browser/ console.

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

What is the difference?
element.addEventListener(‘click’, handleClick)

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

A

handleClick());

fires immediately and messes up the function when button clicks.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q
  • What is theclassNameproperty of element objects?
A
  • Gets or sets class attribute on element
20
Q
  • What is thetextContentproperty of element objects?
A
  • Gets and sets text element
21
Q
  • How do you update the text within an element using JavaScript?
A
  • Query select element and assign it using textContent
22
Q
  • Is theeventparameter of an event listener callback always useful?
A

No

23
Q
  • Why is storing information about a program in variables better than only storing it in the DOM?
A
  • If it wasn’t stored in variables it would need to run back and fourth between html and javascript. Keep your code in javascript.

24
Q
  • What event is fired when a user places their cursor in a form control?
A

focus

25
Q
  • What event is fired when a user’s cursor leaves a form control?
A

blur

26
Q
  • What event is fired as a user changes the value of a form control?
A

Input

27
Q
  • What event is fired when a user clicks the”submit”button within a?
A

Submit

28
Q
  • What does theevent.preventDefault()method do?
A

Stops the default behavior for that event

29
Q
  • What does submitting a form withoutevent.preventDefault()do?
A

Refreshes the page

30
Q
  • What property of a form element object contains all of the form’s controls.
A

form.element

31
Q
  • What property of a form control object gets and sets its value?
A

value property

32
Q
  • Does thedocument.createElement()method insert a new element into the page?
A

No

33
Q
  • How do you add an element as a child to another element?
A

appendChild(); append();

34
Q
  • What do you pass as the arguments to theelement.setAttribute()method?
A

‘attribute’, ‘name’

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

query the parent element, create the child, give it text content,
parent.appendChild(child);

36
Q
  • Name two ways to set theclassattribute of a DOM element.
A

className(); or setAttribut();

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

you can reuse it or give it a name to the process.

38
Q
  • What is theevent.target?
A

The DOM object of the HTML element where the event was triggered

39
Q
  • Why is it possible to listen for events on one element that actually happens to its descendent elements?
A

Event flow when you hover or click on a link you also click on its parent elements. Event bubbling.

40
Q
  • What does theelement.closest()method take as its argument and what does it return?
A
  • It takes a css selector as a string and returns the closest ancestor or element to the event.
41
Q
  • How can you remove an element from the DOM?
A
  • element.remove();
42
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
  • You target the parent element.
43
Q
  • What is the affect of setting an element todisplay: none?
A
  • Hides the element without deleting it, used with javascript.
44
Q
  • What does theelement.matches()method take as an argument and what does it return?
A
  • A css selector as a string and returns a boolean
45
Q
  • How can you retrieve the value of an element’s attribute?
A
  • getAttribute(); it takes an argument of a string and returns the attribute you were searching for
46
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
  • You’d have to query every tab and add event listeners for each one
47
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
  • You’d have to individually set each item

Web Development (15 decks)

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