dom-querying Flashcards
Why do we log things to the console?
Logging things to the console lets us examine what that variable or element looks like at a certain point in code. It can help us see if we did something wrong or assure us that we are on the right track.
What is a “model”?
A model is recreation of something or another form of something. Not usually one-to-one, but something that is the essence of the thing they are trying to recreate.
Which “document” is being referred to in the phrase Document Object Model?
The document is the page that is built by the browser which holds all the objects that make up the page. It is the highest element in the DOM with the child being the html element.
What is the word “object” referring to in the phrase Document Object Model?
The word object is referring to the elements that make up the html of the webpage and all other objects required to build the object tree.
What is a DOM Tree?
A DOM tree is a bunch of element nodes that are related to each other by being parents or children of one another. The top node is the document node, then the html node, then the rest of the html document. Each node on the tree can access other nodes with built in DOM methods.
Give two examples of document methods that retrieve a single element from the DOM.
Two examples of document methods that retrieve a single element from the DOM are: document.querySelector() and document.getElementById()
Give one example of a document method that retrieves multiple elements from the DOM at once.
One example of a document method that retrieves multiple elements from the DOM at once is: document.querySelectorAll() and document.getElementsByClassName() and document.getElementsByTagName()
Why might you want to assign the return value of a DOM query to a variable?
You might want to assign the return value of a DOM query to a variable to increase efficiency. Searching the DOM can be intensive and instead of searching it each time you want to use an element from the tree, the location of that element within the tree can be stored in a variable instead.
What console method allows you to inspect the properties of a DOM element object?
The console method that allows you to inspect the properties of a DOM element object is: console.dir(). This shows the whole built out directory of the DOM element object.
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
The script tag needs to be placed at the bottom of the HTML content instead of at the top because the content of the webpage should be loaded before attempting to manipulate it in JavaScript.
What does document.querySelector() take as its argument and what does it return?
document.querySelector() takes in a string of a css selector as its argument and returns the location of that element in the DOM tree along with the properties, attributes, and methods that come with that DOM tree element.
What does document.querySelectorAll() take as its argument and what does it return?
document.querySelectorAll() takes in a string of a css selector as its argument and it returns all the elements that have that css selector in a NodeList.
