JS DOM 선택

document.querySelector('h1')
document.querySelectorAll('h1')

등으로 html에 있는 문서들의 요소를 가져올 수 있다. tag, #id .class 등등 가능

for (let link of allLinks) {
    link.innerText = 'I AM A LINK!!!'
    link.innerHTML = '<b>I AM A LINK!!!</b>'
}

 

쿼리선택으로 모든 a 태그를 선택하고 for of 반복문으로 allLinks 변수 안 link들의 innerText를 바꾼다.

이렇게 함으로써 html의 모든 a 태그의 글자는 I AM A LINK!!!로 바뀐다.

여기서 innerText와 innerHTML의 다른점은 Text는 그저 text로 인식하고 HTML은 html의 요소도 인식한다.

 

아래의 link.innerHTML이 인식되면 I AM A LINK!!! 같이 <b> </b>도 인식하지만 text는 하지 못하고

<b>I AM A LINK!!!</b> 가 출력된다. 즉, 태그 인식의 차이

document.querySelector('body h1 span').innerText = "Disgusting"

 

쿼리셀렉터로 body 태그의 h1태그의 span 태그의 innerText를 "Disgusting"으로 바꾼다.

 

document.querySelector('img').setAttribute('src','https://devsprouthosting.com/images/chicken.jpg');
document.querySelector('img').setAttribute('alt','chicken');

img의 src attribute를 setAttribute를 이용하여 다른 이미지로 바꾸고 src 뿐만 아니라 alt ( img의 설명 ) 을  chicken으로