반응형
셀렉터는 여러가지 방법이 있으니 편한대로 써도 된다.
주요점은 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}`);
}
})
반응형
댓글