DOM

Question 1

What is a “model”?

Answer 1

A representation of an object/something

Question 2

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

Answer 2

The HTML document for that web application

Question 3

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

Answer 3

The model created is made out of objects in the JavaScript language.

Question 4

What is a DOM Tree?

Answer 4

Each branch of the tree ends in a node, and each node contains objects.

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document in memory.

A model of the web page and stored in browsers’ memory. / Element and all its children, and any data in the folder??

Question 5

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

Answer 5

‘getElementById()’ and ‘querySelector()’

Question 6

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

Answer 6

‘getElementsByClassName()’ or ‘getElementsByTagName()’ or ‘querySelectorAll()’

Question 7

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

Answer 7

Store location of element and don’t have to look for it again

So you can access and work on the same element node more than once.

Question 8

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

Answer 8

dir

‘console.dir()’

Question 9

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

Answer 9

The elements need to load first and when try to access through javascript, the elements exist first

The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.

Question 10

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

Answer 10

Takes CSS selector as argument and returns the first matching element.

Question 11

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

Answer 11

Takes CSS selector as argument and returns a NodeList of all elements with argument.

Question 12

What is the purpose of events and event handling?

Answer 12

Events are things that happen; event handlers are functions we provide, work that should happen when events happen; so developers can respond to visitors actions

Question 13

What do [] square brackets mean in function and method syntax documentation?

Answer 13

Means optional

Question 14

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

Answer 14

‘.addEventListener()’

Question 15

What is a callback function?

Answer 15

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Question 16

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

Answer 16

Event object which contains all information about the event

Question 17

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

Answer 17

The target property of the Event interface is a reference to the object onto which the event was dispatched. (property where the event originates from?)

MDN

Question 18

What is the difference between these two snippets of code?

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

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

Answer 18

The second will call the function handleClick when the page loads. The first will call the function when the event fires.

2nd: function is going to be run immediately; even before event

Question 19

What is the ‘className’ property of element objects?

Answer 19

Property holding class attribute of element

The className property of the ‘Element’ interface gets and sets the value of the class attribute of the specified element.

Question 20

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

Answer 20

object.className = ‘string’

var variable-name = document.querySelector(‘class-name’);
variable-name.className = ‘new-class-name’;

Question 21

What is the ‘textContent’ property of element objects?

Answer 21

Text in containing element and its children

The textContent property of the ‘Node’ interface represents the text content of the node and its descendants.

Question 22

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

Answer 22

object.textContent = ‘newvalue’

var variable-name = document.querySelector(‘class-name’);
variable-name.textContent = ‘new strings’

Question 23

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

Answer 23

Not always you don’t always need information about event — function(EVENT)

Question 24

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

Answer 24

It is more work for the browser to not use a variable

Question 25

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

Answer 25

No, the result of method has to be added as a child of an existing element.

Question 26

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

Answer 26

element.appendChild()

Question 27

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

Answer 27

(‘attribute-name’, ‘attribute-text/value/variable’)

Question 28

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

Answer 28

1. createElement 2. Grab spot to append to 3. Append it
2. Create new element: .createElement()
3. Give it content: .createTextNode()
4. Add it to DOM: .appendChild()

Question 29

What is the ‘textContent’ property of an element object for?

Answer 29

Assign or append text content to element; get the text content and set text content

Represents the text content of the node and its descendants.

Question 30

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

Answer 30

1. Create new element and .setAttribute(‘class’, value) method
2. Query the Dom and assign new class to .className property

Question 31

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

Answer 31

1. Repeat code block without retyping
2. Make it dynamic, as long as the data is there, the work will be done
3. Names the purpose of the code block

Question 32

What is the ‘event.target’?

Answer 32

Property where event trigger is from

The target property of the Event interface is a reference to the object onto which the event was dispatched.

Question 33

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

Answer 33

Default type of event flow is Event Bubbling. Event starts at most specific node and flows outward to least specific one.

Question 34

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

Answer 34

event.target.tagName property

Question 35

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

Answer 35

Argument: ‘selector’

Returns: Will return itself or the nearest matching ancestor.

Question 36

How can you remove an element from the DOM?

Answer 36

.remove() method

Question 37

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?

Answer 37

Use event delegation. Add event listener to the parent element holding the elements you want to listen for.