🍋 Selecting, Creating and Deleting elements

JavaScript를 배우면서 노션에 필기해왔는데, velog를 통해 플랫폼을 보여지는 공간으로 옮겨 좀 더 예쁘게 남겨서 스스로 복습하고 싶어지게 기록을 쌓아가고 싶다. 오늘부터 시작🦕

1. 😏Selecting elements

요소 선택하기

console.log(document.documentElement); //문서 전체를 선택 
console.log(document.head); //head를 선택
console.log(document.body); //body를 선택

/* 가장 보편적인 방법 */
console.log(document.querySelector(".header")); //header class 선택
const allSections = document.querySelectorAll(".section");
console.log(allSections); //section class 전체를 nodeList로 반환함

/* 다른 방법 */
console.log(document.getElementById("section--1")); //section--1 id 선택
const allButtons = document.getElementsByTagName("button");
console.log(allButtons); //button tag 전체를 HTMLCollection으로 반환함
console.log(document.getElementsByClassName("btn")); //btn class 전체를 HTML Collection으로 반환함

• getElementsByTagName & getElementsByClassName → HTML Collection을 반환, 노드와 다르게 DOM이 변하면 자동으로 업데이트 된다.

2. 🥳Creating and inserting elements

요소 생성/삽입하기

insertAdjacentHTML & innerHTML

• insertAdjacentHTML : when you want to add to existing HTML in an element, adding position determined by the position parameter.
• innerHTML : when you want to start from scratch with your own HTML, will completely replace all the HTML inside of the element.

const messagebanner = document.createElement("div"); //div 라는 element를 새로 만듦
messagebanner.classList.add("cookie--msg"); //cookie--msg class를 추가
// message.textContent = "We use cookie for improved functionality";

messagebanner.innerHTML =
  'We use cookie for improved functionality <button class="btn btn--close--cookie">Got it!</button>'; //innerHTML로 div 안에 HTML내용을 삽입함

//header.prepend(messagebanner); // add to first child
header.append(messagebanner); // add to last child
//header.append(messagebanner.cloneNode(ture)); // copy node
//header.before(messagebanner); // add in front of header
//header.after(messagebanner);  // add at the back of header

3. 😣Deleting elements

요소 삭제하기

document
  .querySelector(".btn--close--cookie")
  .addEventListener("click", function () {
    messagebanner.remove();
  });