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
* What event is fired when a user's cursor leaves a form control?
blur
26
* What event is fired as a user changes the value of a form control?
Input
27
* What event is fired when a user clicks the "submit" button within a ?
Submit
28
* What does the event.preventDefault() method do?
Stops the default behavior for that event
29
* What does submitting a form without event.preventDefault() do?
Refreshes the page
30
* What property of a form element object contains all of the form's controls.
form.element
31
* What property of a form control object gets and sets its value?
value property
32
* Does the document.createElement() method insert a new element into the page?
No
33
* How do you add an element as a child to another element?
appendChild(); append();
34
* What do you pass as the arguments to the element.setAttribute() method?
'attribute', 'name'
35
* What steps do you need to take in order to insert a new element into the page?
query the parent element, create the child, give it text content,
parent.appendChild(child);
36
* Name two ways to set the class attribute of a DOM element.
className(); or setAttribut();
37
* What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
you can reuse it or give it a name to the process.
38
* What is the event.target?
The DOM object of the HTML element where the event was triggered
39
* Why is it possible to listen for events on one element that actually happens to its descendent elements?
Event flow when you hover or click on a link you also click on its parent elements. Event bubbling.
40
* What does the element.closest() method take as its argument and what does it return?
* It takes a css selector as a string and returns the closest ancestor or element to the event.
41
* How can you remove an element from the DOM?
* element.remove();
42
* 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?
* You target the parent element.
43
* What is the affect of setting an element to display: none?
* Hides the element without deleting it, used with javascript.
44
* What does the element.matches() method take as an argument and what does it return?
* A css selector as a string and returns a boolean
45
* How can you retrieve the value of an element's attribute?
* getAttribute(); it takes an argument of a string and returns the attribute you were searching for
46
* 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?
* You’d have to query every tab and add event listeners for each one
47
* 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?
* You’d have to individually set each item
