1.
Selecting
- getElementById:
document.getElementById(‘banner’)
- getElementsByTagName: (all the passages or anchor tag or img)
document.getElementsByTagName('p')
- getElementsByClassName
const squareImage = document.getElementsByClassName('square')
2. querySelector : like Selecting but can be used for ID, class,
CSS style,… But for the first match
document.querySelector(‘h1’)
document.querySelector('img:nth-of-type(2)')
document.querySelector('a[title="Java"]')
—> <a href="/wiki/Java" title="Java">Java</a>
const checkbox = document.querySelector('input[type="checkbox"]'); (select base on
type)
3. querySelectorAll
const links = document.querySelectorAll('p a')
(Decedant)
for (let link of links){
console.log(link.href)
}
document.querySelector('input’)[1]
4. InnerHTML & innerText
- HTML : care about the type of anchor ( italic, bold, superior … )
document.querySelector('h1').innerHTML = '<i>LOLO </i>'
document.querySelector('h1').innerHTML += '<sup> Additional
</sup>'
- Text: just take all the text
document.querySelector('h1').innerText = '<i>LOLO </i>'
5. Attributes
- document.querySelector('#banner').id = 'whoop'
—> Changing ID make the attribute different also because it is set
in CSS
- .getAttribute(‘id’ / ‘class’/ ‘tittle’) or .setAttribute(‘tittle’,
‘chicken’) to change
- Get the type attribute:
const input = document.querySelector('input[type="text"]')
- Change type of attribute :
input.type = ‘color’ === input.setAttribute(’type’, ‘color’)
- Changing Style:
const h1 = document.querySelector('h1')
h1.style.color = ‘aqua’
- Change style of many elements :
Const allLinks = document.querySelectorAll(‘a’)
for (let link of allLinks){
link.style.color = 'red'}
- To know what style is dominating:
window.getComputerStyle(h1).color
- Class List :
h2.classList.add(‘purple’) to add another class to the current one
h2.classList.toggle(‘purple’): to turn on/off the attribute
6. Parent/ Children/ nextSibling/ previousSibling:
- There is only 1 parent for any child
firstBold.parentElement
- There could be many children for a parent
paragraph.children[0]
- Sibling: use nextElementSibling or
previousElementSibling
7. Append & appendChild / create Element
- Method 1 : document.createElement() search in MDN
- append a child: document.body.appendChild(newImage)
- Example: Create a H3, add content and add H3 into the body
const newH3 = document.createElement('h3')
newH3.innerText = 'I am new! '
document.body.appendChild(newH3)
- Method 2 : ParentNode.append() : to add anything to the
ParentNode (text, h1 ,h2 …)
const p = document.querySelector('p')
p.append(‘I am new text’, ‘Bye bye’) —> Add to the end of
the paragraph
const newB = document.createElement('b')
newB.append('Hi!')
p.prepend(newB) —> Add to the beginning
- Add an Element in somewhere else:
TargetElement.insertAdjacentElement(position, Newelement)
h1.insertAdjacentElement('afterend', h2) to add h2 after h1
8. Remove and removeChild()
img.remove( )
EVENTS
1. Inline event
2. Onclick property :
document.querySelector('h1').onclick = function(){
alert('You clicked the h1')
}
3. AddEventListener
Example 1:
const btn3 = document.querySelector('#v3');
btn3.addEventListener('click', () => {
alert('CLICKED!')
})
Example 2:
const makeRandColor = () => {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
return `rgb(${r}, ${g}, ${b})`;
}
const buttons = document.querySelectorAll('button');
for (let button of buttons) {
button.addEventListener('click', function(){
const newColor = makeRandColor();
button.style.backgroundColor= newColor;
button.style.color = makeRandColor();
})
}
4. This
const buttons = document.querySelectorAll('button');
for (let button of buttons) {
button.addEventListener('click', colorize)
}
function colorize() {
this.style.backgroundColor = makeRandColor();
this.style.color = makeRandColor();
console.log(this)
}
5. Event Object
input.addEventListener('keydown', function(e){
console.log(e.key) —> It varies based on the language
console.log(e.code) —> Actually on the keyboard
})
6. EventDefault: prevent to change page when submitting
const form = document.querySelector("#tweetForm");
form.addEventListener('submit', function(e){
e.preventDefault();
});
7. .value : to take the value/content of the input
input.value = ‘ ‘ : to create an empty string after taking the input
If the element has a name, we can access : form.elements.username.value
8. Input Event: any change in the input will be recorded
const input = document.querySelector('input');
const h1 = document.querySelector('h1');
input.addEventListener('input', function(){
h1.innerText= input.value;
})
9. Change Event: record after hitting Enter
10. Empty input : !input.value or input.value === ‘’
11. Event bubbling:
button.addEventListener('click', function (e) {
container.style.backgroundColor = makeRandColor();
e.stopPropagation(); —> To change the button, but not execute the parent div/
paragraph
})
12. Event Delegation : to delete the content
tweetsContainer.addEventListener('click', function (e) {
e.target.remove();
})
TO MAKE IT ONLY APPLIES ON LIs:
e.target.nodeName === 'LI' && e.target.remove();
