DOM Flashcards
What does document.querySelectorAll() take as its argument and what does it return?
takes a css selector and returns a node list
What does document.querySelector() take as its argument and what does it return?
takes a css selector and returns a single node
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
so that everything else could load first
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why might you want to assign the return value of a DOM query to a variable?
you use it frequently
What is the word “object” referring to in the phrase Document Object Model?
objects are what comprise the web page
Which “document” is being referred to in the phrase Document Object Model?
document node
What is a DOM Tree?
dom element with its components it consists of four nodes: document node, element nodes, attribute nodes, and text nodes
Why do we log things to the console?
we log things to the console to know what we are doing and to check that our work is valid
Which “document” is being referred to in the phrase Document Object Model?
html
What is a “model”?
representation of something
Why do we log things to the console?
we log things to the console to know what we are doing and to check that our work is valid
What is the purpose of events and event handling?
user interactivity
Are all possible parameters required to use a JavaScript method or function?
no
What method of element objects lets you set up a function to be called when a specific type of event occurs?
.addEventListener()
What object is passed into an event listener callback when the event fires?
event object; all of the data that a browser feels is pertinent to that event
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
the target property of the event interface is a reference to the object onto which the event was dispatched
check on mdn
basically, which object was the event acted upon?
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
the first is using a callback function while the second is immediately calling the function
What is the className property of element objects?
the className property gets and sets the value of the class attribute of the specified element
How do you update the CSS class attribute of an element using JavaScript?
use the className property
What is the textContent property of element objects?
it is whatever text is written for the object
What is the textContent property of element objects?
text inside of the element
Is the event parameter of an event listener callback always useful?
it is not always useful
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
it would be more complicated because we would have to
Why is storing information about a program in variables better than only storing it in the DOM?
you don’t have to keep searching for the information in the dom
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks the “submit” button within a ?
submit
What does the event.preventDefault() method do?
if the event does not get explicitly handled, its default action should not be taken as it normally would be
What does submitting a form without event.preventDefault() do?
it refreshes the page immediately
What property of a form element object contains all of the form’s controls.
element
What property of form a control object gets and sets its value?
value
What is one risk of writing a lot of code without checking to see if it works so far?
one part of the code may be broken and it would be a hassle to track through all the code to find what is broken
What is an advantage of having your console open when writing a JavaScript program?
you can immediately detect when there is an error message
Does the document.createElement() method insert a new element into the page?
no
How do you add an element as a child to another element?
appendChild()
What do you pass as the arguments to the element.setAttribute() method?
name, value
What steps do you need to take in order to insert a new element into the page?
query document, create element, append element
What is the textContent property of an element object for?
see the text content
Name two ways to set the class attribute of a DOM element.
className and setAttribute
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
reusability, no need to create another function in a different area so more control
Give two examples of media features that you can query in an @media rule
placeholder
Which HTML meta tag is used in mobile-responsive web pages?
placeholder
What is the event.target?
this is the element to which the event happened to
Why is it possible to listen for events on one element that actually happen to its descendent elements?
bubbling
What DOM element property tells you what type of element it is?
element.target.nodeName
tagName
What does the element.closest() method take as its argument and what does it return?
this traverses the element and its parent until it finds a node that matches the provided selector string and it will return itself or the matching ancestor; if no such element exists, it returns null
How can you remove an element from the DOM?
use .remove() method
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?
parent element
