기초공사 (html,css,javascript)
노드 배열로 작성 및 삭제 - Array / node / parentNode / remove 본문
//
/*
실습 :
웹문서를 열었을때,
시간이 12시 이전이면 images/morning.jpg
시간이 12시 이후이면 images/afternoon.jpg을 표시하려고 한다.
현재시간을 알아내려면 알아내는 방법은 아래 제공 :
const today = new Date(); // 현재 날짜와 시간 정보를 담은 today 객체
const hrs = today.getHours() // 현재 시간중 시 정보를 가져온다.
1. 현재 시간에 따른 이미지를 다르게 하려면 어떻게 해야할까?
-- if(hrs > 12) images/afternoon.jpg
images/morning.jpg
2. img 요소를 만들고 이미지 파일 경로를 지정하려면 어떻게 해야할까?
--let imgE = document.createElement("img") // 이미지 태그를 만든다
--let srcNode2 = document.createAttribute("src") // 이미지 속성만들기
srcNode2.value = "../img/morning.jpg"
srcNode2.value = "../img/afternoon.jpg"
imgE.setAttributeNode(srcNode2) // 요소와 속성 연결하기
// 어디에 위치 시킬지 자식노드 연결하기
document.orderInfo_add.appendChild(imgE)
*/
const orderInfo_add2 = document.querySelector("#orderInfo"); // 추가하는 영역
const today = new Date();
const hrs = today.getHours();
console.log(hrs);
let imgE = document.createElement("img");
// let srcNode2 = document.createAttribute("src");
// srcNode2.value = "../img/morning.jpg";
// srcNode2.value = "../img/afternoon.jpg";
// imgE.setAttributeNode(srcNode2); // 요소와 속성 연결하기
// 위의코드 말고 직접 할당한다.
imgE.src = hrs < 12 ? "../img/morning.jpg" : "../img/afternoon.jpg";
// 어디에 위치시킬지 자식노드 연결하기
orderInfo_add2.appendChild(imgE);
const orderInfo_add2 = document.querySelector("#orderInfo"); // 추가하는 영역
const today = new Date();
const hrs = today.getHours();
console.log(hrs);
let imgE = document.createElement("img");
// let srcNode2 = document.createAttribute("src");
// srcNode2.value = "../img/morning.jpg";
// srcNode2.value = "../img/afternoon.jpg";
// imgE.setAttributeNode(srcNode2); // 요소와 속성 연결하기
// 위의코드 말고 직접 할당한다.
imgE.src = hrs < 12 ? "../img/morning.jpg" : "../img/afternoon.jpg";
// 어디에 위치시킬지 자식노드 연결하기
orderInfo_add2.appendChild(imgE);
여기에서는 속성노드를 왜 안만들고도(위의 주석된 부분) 이미지가 잘 나왔지?
==>
imgE.src 속성을 직접 설정하는 방식을 사용했기 때문이다.
document.createElement("img")를 통해 이미지 요소 (img)를 생성한 후, imgE.src에 직접 값을 할당합니다.
이렇게 하면 img 태그의 src 속성이 설정되며, 이 속성은 이미지의 경로를 나타냅니다.
삼항 연산자 (hrs < 12 ? "../img/morning.jpg" : "../img/afternoon.jpg")를 사용하여
현재 시간 (hrs)에 따라 다른 이미지 경로를 src에 할당합니다.
// 삭제하기
요소.remove()
// 자식 노드를 제거하는 removeChild( ) 메서드 사용하기
앞에서 살펴본 remove( ) 메서드는 메서드를 사용한 노드 자체를 삭제한다.
하지만 요소보다 하위요소, 즉 자식노드를 삭제해야 할 경우도 있다.
remove( ) 대신 removeChild( ) 메서드를 사용한다.
자신을 삭제하는것이 아니라 자식 노드를 삭제한다.
이 메서드를 사용하려면 먼저, 부모노드를 찾아야하고, 그 후에 자식 노드를 삭제해야한다.
부모노드를 찾는 방법
<body>
<div id="container">
<h1>상품 설명12</h1>
<h2>HTML+CSS+자바스크립트 웹 표준의 정석</h2>
<p>한 권으로 끝내는 웹 기본 교과서</p>
<p>코딩 완초보도 OK! 기초부터 활용까지 완전정복</p>
<button id="order">주문하기</button>
</div>
<h1>Web Programming</h1>
<ul id="items">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<div id="orderInfo"></div>
<div id="orderInfo2"></div>
</body>
parentNode는 현재 노드의 부모 노드에 접근해서 부모 노드 요소 노드를 반환하는 프로퍼티 이다.
노드.parentNode
const ul_remove = document.querySelector("#items"); //ul
const items = document.querySelectorAll("#items > li"); //li들
console.log(items);
items.parentNode;
// console.log(items.parentNode); //ul로 나옴
// 두가지 예시
1. 내가 선택한 li를 삭제해라. 2. x표시를 클릭하면 삭제해라
<body>
<div id="container">
<h1>상품 설명12</h1>
<h2>HTML+CSS+자바스크립트 웹 표준의 정석</h2>
<p>한 권으로 끝내는 웹 기본 교과서</p>
<p>코딩 완초보도 OK! 기초부터 활용까지 완전정복</p>
<button id="order">주문하기</button>
</div>
<h1>Web Programming</h1>
<ul id="items">
<li><span>✗</span>HTML</li>
<li><span>✗</span>CSS</li>
<li><span>✗</span>Javascript</li>
<li><span>✗</span>React</li>
</ul>
<div id="orderInfo"></div>
<div id="orderInfo2"></div>
</body>
// js
//*** 1. li를 클릭하면 삭제하기 해보기 *****/
/*
1. li가 100개일수있다.
-- li의 부모노드로 가서 부모노드에서 내가 선택한 li를 삭제한다.
-- li가 여러개이다. 순회.어떤 for문을 돌아야하나.
-- 유사배열 객체 forEach로 돌리자.
--요소.forEach()-??
*/
items.forEach((item) => {
item.addEventListener("click", function () {
console.log(item.parentNode); // ul
// item.parentNode.remove(item); // ul 자체를 없앤다.
item.parentNode.removeChild(item); // item.parentNode=>ul이고,ul의 자식인 li를 지워야하니
removeChild가 되는것이다. remove를 하게되면 ul을 지우는것임.
});
});
//**** 2. x표시를 클릭하면 삭제하게 하기 */
/*
1.li 안에 있는 X표시 span을 클릭시 li의 요소를 지운다.
- li가 많아서 for를 돌린다.
- button을 클릭하면 button의 부모를 가져와서 li를 지운다.
- span을 클릭하면 li를 지운다.
span.parentNode.remove
*/
const buttons = document.querySelectorAll("li > span");
console.log(buttons);
buttons.forEach((button) => {
button.addEventListener("click", () => {
button.parentNode.remove(button);// button.parentNode -> li이고,li의자식이 아니라 li를 삭제하는것이므로
remove로 하는것임.
});
});
여기에서 햇갈렸던것.
remove / removeChild
item.parentNode.removeChild(item); 와
button.parentNode.remove(button); 임
설명은 위의 코드에 적어놨음
'academy > JavaScript' 카테고리의 다른 글
| 예제 -DOM2 - 하나의 tr에 td 여러개(append) (0) | 2024.05.02 |
|---|---|
| 백틱과 ${ } (0) | 2024.04.30 |
| nodelist 와 htmlcollection 차 (0) | 2024.04.25 |
| return과 map( ) (1) | 2024.04.18 |
| map( ) (1) | 2024.04.17 |
'academy/JavaScript' Related Articles
more
