querySelector의 사용
style="
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
"
>
<picture>
<img
src="https://i.namu.wiki/i/SzWIT97QJSXiojeFDWs0IF6ggzfowjrrxBjrccTq1e4IwPJDqD5dcqS7L7n57mbigJSayWQS6Y-TA6Jxw5QwRJiDublckdHxwyclzHVkecZpcMjUyjQJtSery1OXAqo2DliKt_egwI5cUuPBcHk9TQ.svg"
alt="Javascript"
style="display: block; margin-bottom: 20px; width: 100px; height: 100px"
/>
</picture>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLPLQGezkpT1ntM2T0k3TR0yY75wevMpjLKA&s"
alt="React"
style="display: block; margin-bottom: 20px; width: 100px; height: 100px"
/>
</div>
<section>
<img
src="https://i.namu.wiki/i/ni7tOjXGL82aDoXFV7ufKaAJtdOXYvRo7BS6sGrqADJy5E9mhGFkazeQ6Ssuf9mrpV3N3p4APXUSBv0DjfOFk-uQBosaNQ8kl4KaBlOiX5X3VGTip4WDXG-sLcN1P06YDkbZjf1U51sNKtwhbgMW2A.svg"
alt="Next.js"
style="display: block; margin-bottom: 20px; height: 50px"
/>
</section>
<script>
// alt가 React인 img 태그 선택
const reactImg = document.querySelector('img[alt="React"]');
console.log("React 이미지 선택:", reactImg); // 선택된 img 태그 출력
// TODO: querySelector로 div 의 자식인 img 태그를 선택해 보세요.
const selectedImg = document.querySelector("div img")
</script>DOM요소 추가
<div id="parent">
<p>기존 문단입니다.</p>
</div>
<button id="addElementButton">부모의 마지막 자식요소로 추가</button>
<button id="insertBeforeButton">두 번째 자식 요소 앞에 추가</button>
<script>
const parent = document.getElementById("parent");
const addElementButton = document.getElementById("addElementButton");
addElementButton.addEventListener("click", () => {
// 새로운 요소 생성
const newElement = document.createElement("p");
newElement.textContent = "appendChild로 추가된 문단입니다.";
// TODO: 새로운 요소를 parent의 마지막 자식요소로 추가해 보세요
parent.appendChild(newElement)
});
insertBeforeButton.addEventListener("click", () => {
const newElement = document.createElement("p");
newElement.textContent = "insertBefore로 추가된 문단입니다.";
// TODO: 새로운 요소를 parent의 두 번째 요소로 추가해 보세요.
// 힌트: parent.children 은 [ <p>, <p>, ... ] 형식
parent.insertBefore(newElement, parent.children[1]);
});
</script>DOM요소 조작 - classList.toggle()
<style>
.card {
width: 200px;
height: 100px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="card" id="card">This is a card</div>
<button id="toggleButton">카드 보이기/숨기기</button>
<script>
// TODO: "카드 보이기/숨기기" 버튼을 클릭했을 때
//카드가 보이는 상태면 숨기고, 안보이는 상태면 보이게 해보세요
const card = document.getElementById("card");
const toggleBtn = document.getElementById("toggleButton");
toggleBtn.addEventListener("click",() => {
card.classList.toggle("hidden");
});
</script>클래스가 존재하지 않을 경우, 지정한 클래스가 요소의 클래스 목록에 없으면, toggle() 메서드는 그 클래스를 추가하고 존재하지 않는 경우 클래스 제거
DOM요소 스타일 조작
<div
id="box"
style="width: 100px; height: 100px; background-color: lightcoral"
></div>
<button id="changeStyleButton">스타일 변경</button>
<script>
const box = document.getElementById("box");
const changeStyleButton = document.getElementById("changeStyleButton");
changeStyleButton.addEventListener("click", () => {
// 스타일 변경 버튼 클릭 시
// width 를 200px, height 를 200px,
// backgroundColor 는 "lightgreen" 으로 변경해 보세요.
box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "lightgreen";
});
</script>이벤트 위임
<ul id="itemList">
<li>아이템 1</li>
<li>아이템 2</li>
<li>아이템 3</li>
<li>아이템 4</li>
</ul>
<script>
const itemList = document.getElementById("itemList");
ul.addEventListener("click", (event) => {
if (event.target === event.currentTarget) return;
alert(`${event.target.textContent} 클릭됨`);
});
// TODO: 위 JS코드를 삭제하고 이벤트 위임으로 리팩터링
</script>
내배캠 React_7기 이수중