DOM Flashcards
1
Q
- Which “document” is being referred to in the phrase Document Object Model?
A
The HTML document
2
Q
- What is the word “object” referring to in the phrase Document Object Model?
A
- The data type object in JavaScript
3
Q
What is a DOM tree?
A
- The DOM tree is the model of the HTML document stored as an object in JavaScript
4
Q
- Give two examples ofdocumentmethods that retrieve a single element from the DOM.
A
- Document.querySelector();
* Select element by id
5
Q
- Give one example of adocumentmethod that retrieves multiple elements from the DOM at once.
A
- document.querySelectorAll();
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
7
Q
- Whatconsolemethod allows you to inspect the properties of a DOM element object?
A
- console.dir();
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.
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
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
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
12
Q
- What is the purpose of events and event handling?
A
They make our apps do stuff!
13
Q
- Are all possible parameters required to use a JavaScript method or function?
A
No
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
15
Q
callback function
A
a function definition being passed in as an argument
16
Q
- What object is passed into an event listener callback when the event fires?
A
The target of the object
17
Q
- What is theevent.target? If you weren’t sure, how would you check?
A
You can check in your browser/ console.
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.
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
