1.특정 태그 안에있는 id를 찾는 법
document.querySelector('div .'id이름')쿼리 셀렉터는 css랑 선택자랑 똑같이 작용한다는 것이 편리한 것 같다.
3x4 행렬의 한 타일을 클릭했을 때 그 타일이 img태그를 가질 때 삭제하고 싶었다.
//메인 스테이지는 저 행렬을 담은 컨테이너다.
document.querySelector('.zerohoney-main-stage').addEventListener('click',(a)=>{
console.log(document.querySelector('div .zerohoney-hero-image').remove())
})
div태그 안에 있는 특수한 아이디를 가진 태그를 remove로 삭제했다.
2.개정 코드
let selectedTile = document.querySelector(`#${clickedTile.target.id}`);
let heroImg = document.querySelector("div .zerohoney-hero-image");
let villanImg = document.querySelector("div .zerohoney-villan-image");
console.log(selectedTile);
console.log(selectedTile.tagName);
if (zerohoneyTurn === "hero") {
// 만약 선택한 타일의 아이디에 히어로가 없다면
if (selectedTile.id !== "zerohoney-hero-image-id") {
zerohoneyBeforeHeroTile = selectedTile.id;
if (
// 빌런의 타일과 겹쳐지는걸 방지
selectedTile.tagName !== "IMG"
) {
// 히어로 이미지 제거
heroImg.remove();
selectedTile.innerHTML = spiderManNormal;
}
zerohoneyTurn = "villan";
}
} else if (zerohoneyTurn === "villan") {
// 만약 선택한 타일의 아이디에 빌런이 없다면
if (selectedTile.id !== "zerohoney-villan-image-id") {
zerohoneyBeforeVillanTile = selectedTile.id;
if (
// 히어로의 타일과 겹쳐지는걸 방지
selectedTile.tagName !== "IMG"
) {
// 빌런 이미지 제거
villanImg.remove();
selectedTile.innerHTML = electroNormal;
}
zerohoneyTurn = "hero";
}
}만약 내가 찍은 곳이 img태그라면 아무일도 안 일어나게하는 간단한 함수이다.
괜히 id만들고 하지말고 tagname으로 간단한게 판별해보자...
3.css 파일에서 style js로 가져오기
<body>
<div class="dd">안녕</div>
</body>
<script>
console.log(document.querySelector(".dd").style.display);
document.querySelector(".dd").style.display;
</script>css
.dd{
display: none;
}지금까지 당연히 콘솔에 none이 뜰줄 알았다. 왜? css에 정의한걸 가져왔으니까... 근데 이렇게 하는게 아니였다.
let temp=document.querySelector(".dd");
console.log(getComputedStyle(temp).display);getComputedStyle에 나의 태그를 넣고 prototype으로 display를 가져오자....
즉 ,getComputedStyle(temp)=document.querySelector(".dd").style
이다. 이렇게 하면 js로 현재 css를 가져올 수 있다 만세!
개발당시에 직면한 이슈를 정리하는 곳