typescript 에서 DOM 제어

셀렉터는 여러가지 방법이 있으니 편한대로 써도 된다.

주요점은 DOM에 있는 Element를 참조할 때 종류에 따라 다른 타입을 찾아야 한다는 점이다.

아래 코드를 보면 어떤 것은 HTMLAnchorElement, 어떤 것은 HTMLImageElement 등으로 나뉘어져 있는 것을 볼 수 있고

그 외에도 다양한 종류가 있다.

let title = document.querySelector("#title");
if(title != null) {
    // title의 innerHTML 속성 변경
    title.innerHTML = "제목 변경"
}
if(title instanceof Element) {

}
let title2 = document.querySelector("#title") as Element;
if(title?.innerHTML != undefined) {

}
let link = document.querySelector(".link");
if(link instanceof HTMLAnchorElement) {
    link.href = "http://google.com";
}
let button = document.querySelector("#button");
button?.addEventListener('click', function() {

})
let image = document.querySelector("#image");
if(image instanceof HTMLImageElement) {
    image.src = "new.jpg";
}
// .naver에 해당하는 것을 전부 받아 배열로 받는다.
let links = document.querySelectorAll(".naver");
links.forEach((v, i) => {
    if(v instanceof HTMLAnchorElement) {
        v.href = "https://kakao.com";
        console.log(`${i} : ${v.href}`);
    }
})