DOM & JavaScript

Question 1

Why do we log things to the console?

Answer 1

look at values of variables and double check functions

Question 2

Which “document” is being referred to in the phrase Document Object Model?

Answer 2

refering to the HTML document

Question 3

What is the word “object” referring to in the phrase Document Object Model?

Answer 3

refering to JavaScript objects

Question 4

What is a DOM Tree?

Answer 4

Model of web page consisting of all elements used on web page

Question 5

Give two examples of document methods that retrieve a single element from the DOM.

Answer 5

queryElementById( ) & querySelector( )

Question 6

Give one example of a document method that retrieves multiple elements from the DOM at once.

Answer 6

getElementById( ) & querySelectorAll( )

Question 7

Why might you want to assign the return value of a DOM query to a variable?

Answer 7

for future references if needed to be used more than once

Question 8

What console method allows you to inspect the properties of a DOM element object?

Answer 8

console.dir( )

Question 9

Why would a tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 9

since the the document loads from top to bottom

Question 10

What does document.querySelector() take as its argument and what does it return?

Answer 10

takes in a DOM string and returns a string of a css selector

Question 11

What does document.querySelectorAll() take as its argument and what does it return?

Answer 11

takes in a css selector and returns a node list

Question 12

Does the document.createElement() method insert a new element into the page?

Answer 12

No, just makes elements

Question 13

How do you add an element as a child to another element?

Answer 13

appendChild( )

Question 14

What do you pass as the arguments to the element.setAttribute() method?

Answer 14

attribute and value ex: (“class”, “contianer”)

Question 15

What steps do you need to take in order to insert a new element into the page?

Answer 15

1. create element 2. give content 3. add it to the dom

Question 16

What is the textContent property of an element object for?

Answer 16

“get” and “set” textContent

Question 17

Name two ways to set the class attribute of a DOM element.

Answer 17

.className and .setAttribute

Question 18

What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?

Answer 18

to reference again (reuse it somewhere else)

Question 19

What is the event.target?

Answer 19

element where event occured

Question 20

What is the affect of setting an element to display: none?

Answer 20

Hides element

Question 21

What does the element.matches() method take as an argument and what does it return?

Answer 21

Boolean

Question 22

How can you retrieve the value of an element’s attribute?

Answer 22

__element__.getAttrubute( );

Question 23

Why is it possible to listen for events on one element that actually happen its descendent elements?

Answer 23

Event bubbling

Question 24

What DOM element property tells you what type of element it is?

Answer 24

.tagName()

Question 25

What does the element.closest() method take as its argument and what does it return?

Answer 25

string of CSS selector and returns matching ancestor (parent)

Question 26

How can you remove an element from the DOM?

Answer 26

_____.remove( )