DOM 0206 Flashcards by Colin M

Why do we log things to the console?

so u can see what ur code’s doing

How well did you know this?

Not at all

Perfectly

What is a “model”?

a model made of objects representing the document (html)

How well did you know this?

Not at all

Perfectly

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

the document in the browser, an html document

How well did you know this?

Not at all

Perfectly

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

*all objects that make the model

How well did you know this?

Not at all

Perfectly

What is a DOM Tree?

a model of a web page in form of a tree

How well did you know this?

Not at all

Perfectly

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

getElementById( ) - uses value of id attribute
querySelector( ) - this uses css selector or element name etc, returns first matching element

How well did you know this?

Not at all

Perfectly

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

getElementByClassName( )
querySelectorALL( )

How well did you know this?

Not at all

Perfectly

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

In situations where you want to use it more than once.

storing it will make performance better later so the query doent’ have to be run again

How well did you know this?

Not at all

Perfectly

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

console.dir( )
*is dir directory?

How well did you know this?

Not at all

Perfectly

Why would a

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

Because JavaScript runs from top to bottom … the html needs to be parsed before we get to our js

How well did you know this?

Not at all

Perfectly

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

takes a css selector , or others, as an argument. it returns the first element

How well did you know this?

Not at all

Perfectly

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

elements (and others) and returns all nodes with that name

How well did you know this?

Not at all

Perfectly

what is the defer keyword?

it is legacy style, but it allows for full page to load before creating dom tree, NO MATTER WHERE the script tag is located

How well did you know this?

Not at all

Perfectly

What is the purpose of events and event handling?

To run code under specific circumstances

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

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

add event listener method

E g,

Document. queryselector(class).addeventlistener(‘click’, callbackfunction)

How well did you know this?

Not at all

Perfectly

What is a callback function?

function passed into another as an argument

How well did you know this?

Not at all

Perfectly

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

the “event” object

How well did you know this?

Not at all

Perfectly

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

the specific html element that was interacted with

I guess you could console log it or you could console.dir it

How well did you know this?

Not at all

Perfectly

What is the difference between these two snippets of code?

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

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

the second one will be unfefined
*(review this for as to why)

How well did you know this?

Not at all

Perfectly

What is the className property of element objects?

it allows you to get or update a class name

How well did you know this?

Not at all

Perfectly

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

select element with class name and assign

Query selector for getting
.className = ‘class’
I think without the period for the class name

How well did you know this?

Not at all

Perfectly

What is the textContent property of element objects?

allows u to access text content in an element

*And change it?

How well did you know this?

Not at all

Perfectly

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

uses textContent property to update it

How well did you know this?

Not at all

Perfectly

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

I believe it is not only useful but also always necessary

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

More complicated because we would have to write some of the code more than once, that is each time we would want to use the code that we could otherwise put inside a variable

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

it's faster to retrieve, and we don't want to depend on the dom as it's dynamic and changing

this (below) is a getter/setter. how do u convert from one to the other? className

(this sets it) $hotButton.className = 'hot-button hot'; vs (this gets it) $hotButton.className;

should u use "innterText" method?

no, it's a hacking vulnerability

Css. What does the transform property do?

lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Give four examples of CSS transform functions.

rotate, scale, skew, or translate

what does the space before colon do?: .pokeball-wrapper:first-child .pokeball-wrapper :first-child

without space: first child among pokeball wrapper children, that is this Pokeball rappers siblings with space: first child inside the pokeball wrapper, that is this Pokeball rapper's children *double check to confirm this

how do you select items for manipulation with the dom?

Query selector method

how do you listen for things on the dom?

Add event listener

The transition property is shorthand for which four CSS properties?

delay, duration, easing, delay

do you apply transitions to the class or pseudo class?

apply it to the class for full functionality

What event is fired when a user places their cursor in a form control?

the "focus" event

What event is fired when a user's cursor leaves a form control?

*the "blur" event

What event is fired as a user changes the value of a form control?

the input event

What event is fired when a user clicks the "submit" button within a

the "submit" event

What does the event.preventDefault() method do?

prevents default behavior, *and in the case today it prevents the page from resetting after submitting a form

What does submitting a form without event.preventDefault() do?

it would reload the page

What property of a form element object contains all of the form's controls.

.elements

What property of a form control object gets and sets its value?

.value

What is one risk of writing a lot of code without checking to see if it works so far?

wasting time!

What is an advantage of having your console open when writing a JavaScript program?

so you can see functionality thru console logs etc.

study and explain this code: function handleFocus(event) { console.log('focus event fired'); console.log(event.target.name); } function handleBlur(event) { console.log('blur event fired'); console.log(event.target.name); } function handleInput(event) { console.log(event.target.name, event.target.value); } var inputUserName = document.querySelector('#user-name'); var inputUserEmail = document.querySelector('#user-email'); var textArea = document.querySelector('#user-message'); inputUserName.addEventListener('focus', handleFocus); inputUserName.addEventListener('blur', handleBlur); inputUserName.addEventListener('input', handleInput); inputUserEmail.addEventListener('focus', handleFocus); inputUserEmail.addEventListener('blur', handleBlur); inputUserEmail.addEventListener('input', handleInput); textArea.addEventListener('focus', handleFocus); textArea.addEventListener('blur', handleBlur); textArea.addEventListener('input', handleInput);

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

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

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

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

What is the textContent property of an element object for?

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

* .setAttribute or .setClassName?

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

Give two examples of media features that you can query in an @media rule.

min-width max-width

Which HTML meta tag is used in mobile-responsive web pages?

*viewport?

What is the event.target?

tells you what was interacted with

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

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

tag name

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

How can you remove an element from the DOM?

using the remove( ) method

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?

*add to parent to catch what happens on children

What is the event.target?

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

it is treated as having disappeared (not being there)

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

*class, id, element?

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

the getAttribute( ) method

At what steps of the solution would it be helpful to log things to the console?

whenever possible, before writing too much more code

If you were to add another tab and view to your HTML, but you didn't use event delegation, how would your JavaScript code be written instead?

target the children

If you didn't use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

more conditional statements (e.g. if else, switch etc.)

What is a breakpoint in responsive Web design?

the point at which a css rule activates based on parameters set

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a "column" class in a responsive layout?

it responds to changes in screen size / different screen sizes

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will "win". Why is that?

all else equal, selectors lower in the document are higher in priority. that is, source order

should design begin with mobile or desktop screens?

you should perhaps start with mobile because it's easier to make things for bigger from smaller screens than vice versa side note, min width is as screen grows, and what u use when u start with designing for mobile. and vice versa.

what do these do? git stash git stash apply

git stash saves a copy and puts it aside git stash apply brings that previous copy back

how do you get code which spills out the window to fit?

ctrl + z

What is JSON?

JavaScript Object Notation (JSON) is an extremely common data interchange format used to send and store information in computer systems. It is is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You'll come across it quite often,

What are serialization and deserialization?

Serialization is the process of turning an object in memory into a stream of bytes (1s and 0s) so you can do stuff like store it on disk or send it over the network. Deserialization is the reverse process: turning a stream of bytes into an object in memory.

Why are serialization and deserialization useful?

*so it can be stored and sent. *it's more efficient because it turns it into a simpler, more generic format?

How do you serialize a data structure into a JSON string using JavaScript?

use the JSON.stringify(books) e.g. var books = [ { isbn: '1234567', title: 'book one', author: 'author one' }, { isbn: '234567', title: 'book two', author: 'author two' } ]; JSON.stringify(books)

How do you deserialize a JSON string into a data structure using JavaScript?

use: JSON.parse( ) call the method using a string of the data structure, e.g. JSON.parse('{ "id": 567, "name": "Jon Doe" }')

How do you store data in localStorage?

use the setItem method on the localStorage object, e.g. localStorage.setItem('javascript-local-storage', todosJSON)

How do you retrieve data from localStorage?

use the getItem method on the localStorage object, e.g. localStorage.getItem('javascript-local-storage');

What data type can localStorage save in the browser?

a JSON string allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

When does the 'beforeunload' event fire on the window object?

The beforeunload event is fired when the window, the document and its resources are about to be unloaded. https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

what is event handling?

the three steps involved in getting an event to trigger JS code those are: 1 select element 2 specify event 3 call the code

how do you change the text content of a node?

e.g. document.getElementById('divA').textContent = 'This text is different!';

what does this tag do? *from css-media-queries exercise mdn doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

it sets the scale to 100% on mobile devices, not manipulating it to scale up or down as it usually does in the default mode

what does this do: e.target.closest('.task-list-item') ancestor element.

it gets the event's closest ancestor with that class name, in this case it's task-list-item. if the event is a 'click' on a button element, which is a child of an element with '.task-list-item class, the clicking of the button would get that element (class: task-list-item). it could then be removed by using the .remove() method

what is this code doing? var taskList = document.querySelector('.task-list'); taskList.addEventListener('click', taskListCallback); function taskListCallback(e) { console.log('event target:', e.target); console.log('event tagname:', e.target.tagName); if (e.target && e.target.nodeName === 'BUTTON') { console.log(taskList.closest('.task-list-item')); e.target.closest('.task-list-item').remove(); } } OR THE BELOW(THEY ARE DOING THE SAME THING BUT BELOW HAS ONE LINE SEPARATED INTO A VARIABLE var taskList = document.querySelector('.task-list') taskList.addEventListener('click', callBackFunction); function callBackFunction(e) { console.log('event target:', e.target); console.log('event tagname:', e.target.tagName); if (e.target.tagName === 'BUTTON') { var closestAncestor = e.target.closest('.task-list-item'); console.log(closestAncestor); e.target.closest('.task-list-item').remove(); } } https://photos.app.goo.gl/bBR6vCTogWtTbkKu9

you know if you succeeded/failed

read and explain this dom-creation code https://photos.app.goo.gl/oLMaEFW8iumAXgFJ8

https://photos.app.goo.gl/oLMaEFW8iumAXgFJ8

read and explain this javascript-view-swapping code JS https://photos.app.goo.gl/UCmjRdCDEtwipxoA8 HTML https://photos.app.goo.gl/K2LqJybHX2PxfD3P9