JS In the Browser

Question 1

binding to key browser load lifecycle events

Answer 1

RESEARCH

Question 2

creating DOM nodes and injecting them into the DOM

Answer 2

RESEARCH

Question 3

useing data- attributes

Answer 3

RESEARCH

Question 4

What are browser tools you can use to debug?

Answer 4

• Inspector in your browser’s dev tools
• Sources Tab - Step through the code using breakpoints
• Network tab - requests

Question 5

optimizing performance of DOM reads & writes

Answer 5

RESEARCH

Question 6

using localStorage and sessionStorage

Answer 6

RESEARCH

Question 7

Describe jQuery’s.ready feature

Answer 7

DOM.Ready has 3 states:
Loading - still loading
Interactive - loaded and parsed
Complete - all sub resources including images and stylesheets have been loaded

Question 8

Event Bubbling

Answer 8

Event handlers ‘bubble’ up from the child to its ancestor element.

Question 9

What is the DOM?

Answer 9

Document Object Model

• treats HTML, XML, XHTML as a tree structure, each node represents a DOM object with the Document as the root
• ‘map’ of a webpage

Question 10

What is a Global Variable?

Answer 10

Part of a single global object - in the browser it is the Window object

Question 11

How does JS interact with the DOM?

Answer 11

You can select elements and manipulate them through JS.

You can listen for events / user interactions and run a function based on them.

Question 12

What is the difference between document.getElementById and document.getElementsByTagName?

Answer 12

document. getElementById requires an id as an argument and returns a single element.
document. getElementsByTagName requires an HTML tag and returns an array.

Question 13

What are the 2 most flexible selectors to grab html elements from the DOM?

Answer 13

document.querySelector and document.querySelectorAll

document. querySelector grabs the first element it finds
document. querySelector grabs all the elements in the collection

Question 14

What is the difference between innerHTML and textContent?

Answer 14

textContent returns the value inside an HTML tag

innerHTML returns the html element and its value inside of a string

Question 15

How can you change an attribute inside of an element?

Answer 15

You can use dot notation to access that property and reassign its value.

Question 16

How do you get and set an element’s class?

Answer 16

You can do that by accessing its className property.

Question 17

What is the difference between a node and an element in the DOM?

Answer 17

A node belongs to the tree data structure in the DOM and an element is plain HTML.

Question 18

Explain how I would add a node to the DOM

Answer 18

I would create an element and then use appendChild, pass an element into that in order to add this node to the DOM.

Question 19

What are 3 steps to make your site interactive?

Answer 19

1. Select elements in the DOM.
2. Manipulate elements
3. Listen for user actions

Question 20

What is EventTarget?

Answer 20

EventTarget object can be the element, or the window object.

Question 21

How does addEventListener work?

Answer 21

addEventListener takes a DOM event type, and a callback function, called an eventHandler

Question 22

What is the event object?

Answer 22

It contains methods that can be applied as event handlers to an event listener.

Question 23

How do you make sure the target method on the event object triggers for a specific element?

Answer 23

Write a condition in your addEventListener function and add the tagName method to the event.target and assign it the html element type.

if (event.target.tagName == ‘LI’)

Question 24

How would you insert a node before the reference node as a child of the current node?

Answer 24

Use insertBefore