DOM

Question 1

in css how to target input field but only of type password

Answer 1

input[type=”password”]{
height: 50px;
}

Question 2

address element by id

Answer 2

document.getElementById(‘id’);

null if not found

can only be called on document

Question 3

find all fields on the page

Answer 3

var inputs = document.getElementsByTagName(‘input’);

returns a list!!! not an array
but we can address indexes in the same way as with array

inputs[0]

but not pop or push

iterate with for loop is possible

=======

but if we use spread, we can use it as array

const arr = […inputs];

we can call this not only on document, but on other elements too (searching inside their children)

Question 4

find elements by class

Answer 4

var headers = document.getElementsByClassName(‘header’);

returns a list (HTMLCollection)!!! not an array
but we can address indexes in the same way as with array

inputs[0]

but not pop or push

iterate with for loop is possible

=======

but if we use spread, we can use it as array

const arr = […headers];

we can call this not only on document, but on other elements too (searching inside their children)

Question 5

find by css identifiers

Answer 5

document. querySelector(‘h1’);
document. querySelector(‘#red’);
document. querySelector(‘section ul li.special’);
document. querySelector(‘input[type=”password”]’);

returns only one element, the first one

document.querySelectorAll(‘input’); // NodeList of elements, all findings, array-like object

a little less performant than getElementsBy… but not drastically enough to avoid

Question 6

address text of the element

Answer 6

h1.innerText

change it in the console: h1.innerText = “Something new”

if you do ul.innerText (only has children, no direct text) - will give you the text of all children

document.body.innerText gives you all the text from the page

textContent is the same, but retrieves formatting - line breaks, inner texts of embedded elements (<b>)
faster than innerText. Vomits out everything coming between the tags, no matter what inside
</b>

Question 7

innerHTML

Answer 7

gives the HTML representation of everything between the tags of the element, as string

innerText by comparison does not give you html tags

if you set/update content - with innterText you can only insert the text, the literal string
with innerHTML you can insert an HTML piece

Question 8

get content of field

Answer 8

input.value

Question 9

checkbox checked or not

Answer 9

input.checked

Question 10

change placeholder

Answer 10

input.placeholder = “Please, enter password”

Question 11

change link

Answer 11

a.href

Question 12

image path

Answer 12

image.src

Question 13

value of the attribute of the element

Answer 13

element.getAttribute(‘type’)

Question 14

access parent

Answer 14

element.parentElement

supports chaining
element.parentElement.parentElement

Question 15

access children

Answer 15

element.children[0]

Question 16

access siblings

Answer 16

element. nextElementSibling
element. previousElementSibling

supports chaining

Question 17

change style

Answer 17

element.style works only for inline styles, not for css files
but you can set it h1.style.color=”red”

IMPORTANT! JS does not allow dashes in var names, but CSS does
so for ex., background-color is a CSS property, but we can not ask JS to give us p.style.background-color

JS needs camel case instead: p.style.backgroundColor

Question 18

two ways NOT to add event listeners

Answer 18

1. in HTML directly

Click me

2. in JS

const btn = document.querySelector('#clicker');
btn.onclick = function(){
  alert("Clicked");
}

onclick is a property of the element. If we use it second time, the second will overwrite first, so we can bind only one function!!

if you do this:
btn.onclick = alert(“Clicked”); —-> the alert popup will come up without clicking, because you are calling the function

Question 19

the correct way to add events

Answer 19

const btn = document.querySelector(‘#clicker’);

btn.addEventListener(‘click’, function(){
console.log(‘SECOND’);
})

btn.addEventListener(‘click’, function(){
alert(‘SECOND’);
})

the method exists for all elements and opposed to previous methods (btn.onclick) - we can specify multiple functions on the same object for the same (or different) event separately and all of them will fire

Question 20

scroll on entire window

Answer 20

window.addEventListener(‘scroll’, function(){})

window is available as object

we can also scroll on other objects

Question 21

addEventListener and this

Answer 21

in the callback that we pass to addEventListener as second argument we have access to this. In this context, this is the object that we added event listener to (button)

const printColor = function(){
  console.log(this.style.backgroundColor);
}

const box = document.querySelector('#boxId');
box.addEventListener('click', printColor); // when we click and printColor is invoked, in its context this equals to the box element

Question 22

event object

Answer 22

in the callback (second argument of addEventListener) we can pass as argument the event object and use it in the body

const printColor = function(event){
console.log(this.style.backgroundColor);
console.log(event);
}

const box = document.querySelector('#boxId');
box.addEventListener('click', printColor);  

or like this

box.addEventListener(‘click’, function(event){
console.log(event);
});

Question 23

if we need to do something on user typing in something into a field

Answer 23

keypress, keyup, keydown

keyup, keydown work on every press of any button

keypress works on keys which when pressed show some content (for ex., shift does not work, but it’s better to check docs for diff browsers, because this rule does not always apply)

through event we can figure out which button was clicked and define actions on conditions

field.addEventListener('keypress', function(event){
  if(event.key === 'Enter'){
    //do somehting
  }
})

======

we can also observe input events with event input. Here we are updating form data with input text

field.addEventListener(‘input’, function(event){
formdata[cardNumer] = event.target.value;
})

for text fields and dropdowns we use event.target.value
for checkboxes event.target.checked

Question 24

submitting form

Answer 24

when you click the submit button, (by default) the page refreshes. This can be prevented.

const form = document.querySelector('#someform');
form.addEventListener('submit', function(e){
  e.preventDefault();
})

Question 25

elegant way to store form data when user inputs something in any input field, checkbox or dropdown

Answer 25

1. on each html element that we are interested in we define name property with the value that is the key in our formData object

2. identify input fields
const textField = document.querySelector('#fid');
const checkbox = document.querySelector('#cid');
const dropdown= document.querySelector('#did');

3. loop over these fields and add event listener to each of them. It should put the current value from the field into form data under the key of the element’s name.
   (Achtung: destructuring is used twice)

for(let input of [textField, checkbox, dropdown]) {
input.addEventListener(‘input’, ({target}){
const {name, type, value, checked} = target;
formData[name] = type === ‘checkbox’ ? checked : value;

})
}

target is event.target

if we use event change instead of event input:
for dropdown and checkbox it’s the same
but for textfield similar: it will update the form not on every key press, but on every focusing and losing focus.
So for ex., after I entered smth and then pressed Enter or just switched focus.
event input updates on every key press