DOM Flashcards
Why do we log things to the console?
We log things to the console for clarification and for debugging
What is a “model”?
A model is a representation of something.
Of the DOM(document object model), the “model” refers to the model of the web page that the browser creates when it loads a page.
Which “document” is being referred to in the phrase Document Object Model?
The HTML document
What is the word “object” referring to in the phrase Document Object Model?
The word object is a javascript object that is representing all the data and content within the HTML document.
What is a DOM Tree?
The DOM Tree is the model that is created by the browser when it loads the web page, and it is stored in the browser’s memory.
The DOM tree consists of nodes. Each node is an object with methods and properties. (the document & elements and all of their contents are branches within the tree)
The DOM tree consists of four main types of nodes — the document node element nodes attribute nodes text nodes
Give two examples ofdocumentmethods that retrieve a single element from the DOM.
querySelector()
getElementByID()
Give one example of adocumentmethod that retrieves multiple elements from the DOM at once.
querySelectorAll()
getElementsByClassName()
getElementsByTagName()
Why might you want to assign the return value of a DOM query to a variable?
If you want to work with an element more than once, it is helpful to store the result of the DOM query in a variable.
The variable would hold the reference point (the address) of the element you’re searching for. Storing that reference point in a variable will prevent the computer from searching for the same element multiple times. (Repeating DOM queries unnecessarily can really slow down an application.)
Whatconsolemethod allows you to inspect the properties of a DOM element object?
console.dir()
Why would atag need to be placed at the bottom of the HTML content instead of at the top?
Because the browser reads the webpage from top to bottom. So, in order for the browser to read all the element manipulation done within javascript, it first must read the creation and content of the element.
What doesdocument.querySelector()take as its argument and what does it return?
document.querySelector() uses CSS selector syntax to select one or more elements.
This method returns only the first of the matching elements.
What doesdocument.querySelectorAll()take as its argument and what does it return?
document.querySelectorAll() uses CSS selector syntax to select one or more elements and returns all of those that match.
What are DOM queries?
Methods that find elements in the DOM tree.
Why do we log things to the console?
For clarification and for help in debugging.
Logging things to the consoles helps us to ensure that our code is functioning the way it was intended to.
