DOM Flashcards
Why do we log things to the console?
To make sure the code is running correctly and see the data
What is a “model”?
A small representation of something we’re going to build generally
Which “document” is being referred to in the phrase Document Object Model?
The entire HTML document
What is a DOM Tree?
Its a collection of objects that makes up the document
Give two examples of document methods that retrieve a single element from the DOM.
getElementById and querySelector()
Give one example of a document method that retrieves multiple elements from the DOM at once.
Document.querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
In case you need to use the same elements more than once
What console method allows you to inspect the properties of a DOM element object?
Console.dir
Why would a
tag need to be placed at the bottom of the HTML content instead of at the top?
Because we need to load HTML first. or else it will run before the HTML, which we wont be able to query the DOM.
What does document.querySelector() take as its argument and what does it return?
selector. It will return the first element in the dom that matches it.
What does document.querySelectorAll() take as its argument and what does it return?
Selector. Returns a node list or a collection of all the elements that match that selector.
What is the word “object” referring to in the phrase Document Object Model?
The document object. we can check it on console.dir()
What is the purpose of events and event handling?
Have some type of response to when a user interacts with the web page
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 is a callback function?
A callback function is a function passed into another function as an argument
What object is passed into an event listener callback when the event fires?
Event object
What is the event.target?
Target its what the user interacted with. For example, the button ‘Click Me’
It targets the element that triggered the event.
What is the difference between these two snippets of code?element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
second: handleClick is being called. and the return value of handleClick will be substituted for the argument. handleClick() is being called without argument, there is no event object, there is no access to that. and its being called right when the code starts running because of (), no matter what, its going to try to call the function every time. so its going to pass ‘undefined’ as the argument because we’re not returning anything inside handleClick
What is the className property of element objects?
Its a property that stores the class names for that particular element and it can be updated
How do you update the CSS class attribute of an element using JavaScript?
className and the assignment operator
What is the textContent property of element objects?
represents the text content of the main element and its descendants.
How do you update the text within an element using JavaScript?
.textContext and assignment operator
Is the event parameter of an event listener callback always useful?
No. Because sometimes we’re not making use of the event inside the function. But the event object its still there and its always available.
Why is storing information about a program in variables better than only storing it in the DOM?
Easier to access
Difference between innerText and textContent
innerText= will only be able to pull text from elements that are currently visible
textContent does not care. It will still let you access those things.
What does the transform property do?
It allows you to modify the way that an element displays on a page.
Give four examples of CSS transform functions.
rotate, scale, skew, or translate
Does the document.createElement() method insert a new element into the page?
No. It just creates an element.
How do you add an element as a child to another element?
appendChild() method;
Difference between append() and appendChild()
With append, we can append multiple children at once. So we can pass multiple arguments in and it will append all into the same level.
What do you pass as the arguments to the element.setAttribute() method?
name of attribute and value
What steps do you need to take in order to insert a new element into the page?
createElement, give a content(textContent), and append it to the DOM (appendChild/append)
What is the textContent property of an element object for?
It allows to create a text node and assign a text into an element
If we reassign the text content of an element, it will destroy any children and any text that element has.
Name two ways to set the class attribute of a DOM element.
setAttribute, className, and classList
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
repeatability, and visually more pleasing
Give two examples of media features that you can query in an @media rule.
background color, min-width, hover
Which HTML meta tag is used in mobile-responsive web pages?
Viewport meta tag
What is the event.target?
its not the element that has the event listener, its the element which dispatched the event, which was interacted with. even when its the child of a parent. ex: when we click on an element
Why is it possible to listen for events on one element that actually happen its descendent elements?
If there was an event listener that was put on the parent, it would be able to detect any events that happen on its children. Its because those events will bubble up. So if the ul has an event listener and we click on its children, the event listener will fire.
What DOM element property tells you what type of element it is?
event.target.tagName/.-> will always return an element tag
there’s also a similar property called nodeName-> ocasionally may give something other than an element. and thats because node can be text node, white space nodes, element…
What does the element.closest() method take as its argument and what does it return?
Argument: selector. Return value: The closest ancestor Element or itself, which matches the selectors. If it does have any ancestor, it will return null
How can you remove an element from the DOM?
element.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 using the bubbling, we can put an event listener on the parent, and then anything that happens to its children it will catch.
What is event.current.target?
It will always refer to this specific element that has the event.listener
