DOM Flashcards
in css how to target input field but only of type password
input[type=”password”]{
height: 50px;
}
address element by id
document.getElementById(‘id’);
null if not found
can only be called on document
find all fields on the page
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)
find elements by class
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)
find by css identifiers
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
address text of the element
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>
innerHTML
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
get content of field
input.value
checkbox checked or not
input.checked
change placeholder
input.placeholder = “Please, enter password”
change link
a.href
image path
image.src
value of the attribute of the element
element.getAttribute(‘type’)
access parent
element.parentElement
supports chaining
element.parentElement.parentElement
access children
element.children[0]
access siblings
element. nextElementSibling
element. previousElementSibling
supports chaining
change style
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
two ways NOT to add event listeners
- in HTML directly
Click me
- 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
the correct way to add events
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
scroll on entire window
window.addEventListener(‘scroll’, function(){})
window is available as object
we can also scroll on other objects
addEventListener and this
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
event object
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);
});
if we need to do something on user typing in something into a field
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
submitting form
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();
})
