front end 1

reference: JS-DOM - LilyLiya - 博客园

DOM( document object model)

the DOM is a javascript representation of a webpage. It is your JS window into the contents

of a webpage

It is just a bunch of objects that you can interact with via JS

the document object is our entry point into the world of the DOM. It contains representations of all the content on a page, plus tons of useful methods and properties

console.dir(document)

selecting

1. getElementByld

2. getElementsByTagName

3. getElementsByClassName

getElementByld

const chicken = document.getElementById('chicken')

we try to select sth, telling javascript fetch the object that represents some element on the page matching some ID

getElementsByTagName

return html collection. not a array

const allImages = document.getElementsByTagName('img');

for (let img of allImages) {
    console.log(img.src)
}

for (let img of allImages) {
    img.src ='https://aaaa.jpg'//can change all image to one source
}

getElementsByClassName

similiar , but class name

querySelector: a newer, all- in- one method to select a single element

//finds first h1 element
document.quarySelector('h1');
//finds first element with ID of red
document.querySelector('#red');

//finds first element with class of 
document.querySelector('.big');

querySelector just give us the first match, or we can use nth-of-type

document.querySelector('img:nth-of-type(2）')
document.querySelector('a[title="java"]')
//<a href="/wiki/" title="java"> java</a>

querySelectorAll: same idea but returns a collection of matching elements

document.querySelectorAll('a')

manipulating

document.querySelecor('p').innerText
document.querySelector('p').textContent

const allLinks = document.querySelectorAll('a');

for(let link of alllinks) {
   link.innerText = 'I am a link'
}

document.querySelector('h1').innerText = '<i>askd</i>'
document.querySelector('h1').innerHTML = '<i>askd</i>'// will be treated as html

inner test give us test inside and ignores the tags. it is sensitive to what is currently being displayed  and stuff that is being ignored

attributes

const firstLink = document.querySelector('a')
fistLink.getAttibute('href')
fistLink.getAttibute('id')
firstLink.setAttribute('href','http://www.google.com')

changing styles

the style object is actually in line, if we write in css actually it will be undifined

but we can use that to change values and it will work

h1.style.color = 'green';

window.getComputerStyle(h1).color
document.querySelector('#container').style.textAlign = 'center';

document.querySelector('img').style.width = '150px';

document.querySelector('img').style.borderRadius = '50%';

ClassList

to manipulate class

const h2 = document.querySelector('h2')
h2.setAttribute('class','purple')//add a new class attribute named purple
h2.classList
h2.classList.add('purple')
h2.classList.add('border')// class ="purple border" now
h2.classList.remove('border')

Traversintg parent/child/sibling

const firstBold = document.quetySelector('b')

firstBold.parentElement

firstBold.children

firstBold.nextElementSibling
firstBold.previousElementSibling

append

document.body.appendChild(newImg)
p.append("hi")

pokemon example to use java