dom-querying Flashcards

1
Q

Why do we log things to the console?

A

debugging, confirming values or outcomes from code, communicating with other devs working on the project

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

What is a “model”?

A

a model is a representation of a structured document in a tree-like structure. The model consists of a set of objects that represent the various elements in the document.

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

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

A

when we refer to the “document” in the phrase “Document Object Model,” we are talking about a structured document that is displayed in a web browser.

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

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

A

“object” refers to a data structure that represents an element in a structured document.

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

What is a DOM Tree?

A

a tree-like structure that represents the structure of a structured document. The tree consists of a set of objects that represent the various elements in the document.

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

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

A

getElementById(): This method retrieves an element from the DOM based on its unique id attribute.

querySelector(): This method retrieves an element from the DOM based on a CSS selector.

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

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

A

querySelectorAll(). This method retrieves a collection of elements from the DOM based on a CSS selector.

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

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

A

reusability - without having to query the DOM ( more efficient )
Readability - gives the element a descriptive name
Modification - easier to modify becasue you can access using the descriptive variable name.

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

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

A

console.dir - it will display an interactive list of the properties and methods of the element

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

Why would a

 tag need to be placed at the bottom of the HTML content instead of at the top?
A

To increase performance of the page loading. Since Scripts are run before rendering HTML it might be better to put a longer loading script tag at the end so the HTML loads quicker. Also in DOM querying The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.

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

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

A

the argument it takes in a string containing a CSS selector and it returns the first element that matches.

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

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

A

It takes a string containing a CSS selector and returns all elements that match….a node list

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