기초공사 (html,css,javascript)

노드 배열로 작성 및 삭제 - Array / node / parentNode / remove 본문

academy/JavaScript

노드 배열로 작성 및 삭제 - Array / node / parentNode / remove

에스프레소라떼 2024. 4. 29. 20:25

// 

/*
실습 : 
웹문서를 열었을때,
시간이 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>&cross;</span>HTML</li>
      <li><span>&cross;</span>CSS</li>
      <li><span>&cross;</span>Javascript</li>
      <li><span>&cross;</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
reduce( )  (0) 2024.04.19
return과 map( )  (1) 2024.04.18
'academy/JavaScript' Related Articles more