LearningFuze Mod 1 - Dom Query Flashcards
Why do we log things to the console?
To check and debug our code
What is a “model”?
Its showing an example of something
Which “document” is being referred to in the phrase Document Object Model?
Document Node
What is the word “object” referring to in the phrase Document Object Model?
A collection of objects in javascript
What is a DOM Tree?
It represents html objects in the nodes
Give two examples of document methods that retrieve a single element from the DOM.
Documents query selector, and get element by ID
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName()
Why might you want to assign the return value of a DOM query to a variable?
When you need to work with an element more than once, you should use a variable for that query, it also saves time
What console method allows you to inspect the properties of a DOM element object?
the dir method
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
The HTML must be read before the script, or the webpage will read the script first
What does document.querySelector() take as its argument and what does it return?
It takes a CSS selector but instead of a string it returns the HTML element and what it’s holding
What does document.querySelectorAll() take as its argument and what does it return?
it takes any CSS selector and it returns a static Node list
Why do we log things to the console?
To check and debug our code
What is the purpose of events and event handling?
An event indicates an action taking place, and the event handle deals with the event
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?
the addEventListener method
What is a callback function?
it calls and argument in another function
What object is passed into an event listener callback when the event fires?
the event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
It is the element that targets the event
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
The first code has the callback function and the second code is just being called.
What is the className property of element objects?
Is a property that allows us to access or set value of the class for that element
How do you update the CSS class attribute of an element using JavaScript?
using the className property
What is the textContent property of element objects?
Allows you to update the text content of the element you are working with
How do you update the text within an element using JavaScript?
Inner html or text content
Is the event parameter of an event listener callback always useful?
Not always
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 I would have to search each time what we can use to reference a certain number
Why is storing information about a program in variables better than only storing it in the DOM?
It would make us dependent on information stored on the DOM for our Javascript
Does the document.createElement() method insert a new element into the page?
It does not do it
How do you add an element as a child to another element?
You would use the appendChild method
What do you pass as the arguments to the element.setAttribute() method?
Name and value
What steps do you need to take in order to insert a new element into the page?
create the element, and then append it
What is the textContent property of an element object for?
It sets or denotes the text content
Name two ways to set the class attribute of a DOM element.
Can use the set attribute method and class name with is a property
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
Pass in arguments and the second one is adding it to an event listener
What is the event.target?
It is the point of interaction
Why is it possible to listen for events on one element that actually happen its descendent elements?
by bubbling
What does DOM element property tell you what type of element it is?
The tag name property
What does the element.closest() method take as its argument and what does it return?
for the argument it takes selectors and for the returns itself or the matching ancestor and if it doesn’t return an ancestor it will return null
How can you remove an element from the DOM?
By using the 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?
By adding to the parent element
