Document Object Model Flashcards Preview

Web Development > Document Object Model > Flashcards

Flashcards in Document Object Model Deck (40)
Loading flashcards...
1
Q

Why do we log things to the console?

A

We log things to the console for debugging purposes.

2
Q

What is a “model”?

A

The DOM Tree. Model is a representation/copy of the original.

3
Q

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

A

The HTML document is being referred to in the phrase Document Object Model.

4
Q

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

A

JavaScript object.

Each object represents a different part of the page loaded in the browser window.

5
Q

What is a DOM Tree?

A

A tree/structure that shows all nodes/chunks of the HTML document.

6
Q

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

A

document. querySelector( )

document. getElementById( )

7
Q

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

A

document. querySelectorAll( )
document. getElementsByTagName( )
document. getElementsByClassName( )

8
Q

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

A

We might want to assign a return value of a DOM query to a variable so that it is reusable.

9
Q

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

A

console.dir( )

Short for “directory”.

10
Q

Why would a «a>script</a>> tag need to be placed at the bottom of the HTML content instead of at the top?

A

The «a>script</a>> tag needs to be placed at the bottom of the HTML content because the HTML content should load first on the browser.

11
Q

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

A

It takes a CSS selector as its argument and returns the first element with that CSS selector.

12
Q

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

A

It takes a CSS selector as its argument and returns all elements with that CSS selector.

13
Q

Why do we log things to the console?

A

For debugging purposes.

And to check if something is working.

14
Q

What is the purpose of events and event handling?

A

The purpose is to add interactive properties to the website for the users.

Add dynamic content.

Ability to have something occur and do something in response.

15
Q

Are all possible parameters required to use a JavaScript method or function?

A

No.

16
Q

What method of element objects lets you set up a function to be called when a specific type of event occurs?

A

addEventListener( )

17
Q

What is a callback function?

A

A callback function is a function being passed around as a value.

18
Q

What object is passed into an event listener callback when the event fires?

A

The event object.

The event object includes the target property.

19
Q

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

A

The event target is the place/element where the event actually began/occurred. If not sure, we can console.log it and get more information in the console.

20
Q

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick( ))

A

A function is being passed in as an argument in the first snippet.

A function is being called as an argument in the second snippet. (This would not work)

21
Q

What is the className property of element objects?

A

The className property is the property that holds the class names attached to that element object.

22
Q

How do you update the CSS class attribute of an element using JavaScript?

A

You can update the CSS class attribute of an element by:

$element.className = new class name

23
Q

What is the textContent property of element objects?

A

The textContent property is the property that holds the text content attached to that element object/node.

24
Q

How do you update the text within an element using JavaScript?

A

You can update the text within an element by:

$element.textContent = new text content

25
Q

Is the event parameter of an event listener callback always useful?

A

No.

26
Q

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

A

It would be more complicated.

27
Q

Why is storing information about a program in variables better than only storing it in the DOM?

A

It doesn’t have to go to the HTML document to find the data that is desired every time.

Keep JavaScript things in JavaScript.

28
Q

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

A

No.

29
Q

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

A

appendChild( )

30
Q

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

A

The name of attribute and value of the attribute.

31
Q

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

A

querySelector
createElement
appendChild

32
Q

What is the textContent property of an element object for?

A

It is to set or get the text of that element.

33
Q

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

A

setAttribute( )

className property

34
Q

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

A

Reusability.

Variability.

35
Q

What is the event.target?

A

The object for the dom element where the event was fired.

event.target stores the element where the event originated from.

36
Q

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

A

Event bubbling. (Most specific to least specific)

37
Q

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

A

.tagName

38
Q

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

A

It takes a CSS selector and it returns the closest ancestor element with the matching selector. (Goes up the tree and look for the element with the matching selector)

39
Q

How can you remove an element from the DOM?

A

elementName.remove( )

40
Q

If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

A

Add an event listener onto the parent element.