Scribd
Upload
29 views5 pages

DOM Note

Uploaded by

Linh Chi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
29 views5 pages

DOM Note

Uploaded by

Linh Chi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 5

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();

You might also like