DOM & JavaScript Flashcards

1
Q

Why do we log things to the console?

A

look at values of variables and double check functions

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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

A

refering to the HTML document

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

refering to JavaScript objects

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is a DOM Tree?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

queryElementById( ) & querySelector( )

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

getElementById( ) & querySelectorAll( )

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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

A

for future references if needed to be used more than once

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A

console.dir( )

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

since the the document loads from top to bottom

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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

A

takes in a css selector and returns a node list

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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

A

No, just makes elements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

appendChild( )

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A
  1. create element 2. give content 3. add it to the dom
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is the textContent property of an element object for?

A

“get” and “set” textContent

17
Q

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

A

.className and .setAttribute

18
Q

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

A

to reference again (reuse it somewhere else)

19
Q

What is the event.target?

A

element where event occured

20
Q

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

A

Hides element

21
Q

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

22
Q

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

A

__element__.getAttrubute( );

23
Q

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

A

Event bubbling

24
Q

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

A

.tagName()

25
What does the element.closest() method take as its argument and what does it return?
string of CSS selector and returns matching ancestor (parent)
26
How can you remove an element from the DOM?
_____.remove( )