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