[100DaysOfCode] 35강

 

1️⃣ DOM 요소 생성, 삭제, 이동 방법

 

- DOM 요소 생성

1. 새로운 element를 생성한다. createElement

2. 새로운 element를 가지는 부모 element를 선택한다. querySelector

3. 부묘 오소에 새로운 element를 삽입한다. append

 

- DOM 요소 삭제

1. 삭제할 element를 선택한다. querySelector

2. 삭제한다. remove

 

- DOM 요소 이동

부묘 오소를 선택한 후 이동한다.

 

이동할 element.parentElement.append(이동할 element)

 

// 📌 Add an element, HTML 새 요소 삽입

// 1. Create the new element
// 특정 이벤트가 발생했을 때 요소를 추가하고 싶은 경우
let newAnchorElement = document.createElement('a');
// 메모리에만 저장되어 있기 때문에 DOM에 요소를 저장하려면 2, 3단계까지 필요
newAnchorElement.href = 'http://google.com';
newAnchorElement.textContent = ' This link leads to Google!';

// 2. Get access to the parent element that should hold the new element
let firstParagraph = document.querySelector('p');
// 페이지의 첫 번째 단락 선택

// 3. Insert the new element into the parent element content
firstParagraph.append(newAnchorElement);



// 📌 Remove elements, HTML 요소 삭제

// 1. Select the element that should be removed
let firstH1Element = document.querySelector('h1');

// 2. Remove it!
firstH1Element.remove();
// 옛날 브라우저에서도 작동: firstH1Element.parentElement.removeChild(firstH1Element);



// 📌 Move elements, HTML 요소 이동

// 부모 요소 선택 후 이동
firstParagraph.parentElement.append(firstParagraph);

 

 

 

---

2️⃣ innerHTML 속성

element의 content에 접근할 수 있게 해주는 속성이다.

 

// 📌 innetHTML 속성(textContet와 비슷)
// 요소 안에 있는 모든 html 내용에 접근할 수 있게 해줌

/*
The easiest way to 'get the content of an element' is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.
*/

console.log(firstParagraph.innerHTML);

firstParagraph.textContent = 'Hi, This is <strong>important<strong>'; // Hi, This is <strong>important<strong>
// textContent 속성은 텍스트 속 태그를 DOM 요소로 해석하지 않는다


firstParagraph.innerHTML = 'Hi, This is <strong>important<strong>'; // Hi, This is important
// 태그가 HTML 요소로 분석된다

👆 textContent와 innerHTML 속성 비교

 

---

💡 DOM에 새로운 요소를 추가하는 방법은 둘 중에 뭐가 더 좋을까?

innerHTML vs createElement()

 

// 💡 새로운 요소를 추가하는 방법 비교

<div class="container"></div>

// 1. createElement()

let div = document.querySelector('.container');

let h1 = document.createElement('h1');
h1.textContent = 'create element';
div.appendChild(h1);



// 2. innerHTML

let div = document.querySelector('.container');
div.innerHTML = '<h1>create element'</h1>;

 

- innerHTML 속성을 사용하면, 자바스크립트는 모든 태그의 컨텐츠들을 재분석하고, 모든 HTML 요소들을 재생성한다. 이러한 프로세스는 시간이 많이 소모되기 때문에 비효율적이다.

- innerHTML은 이전에 DOM에 추가되었던 event listene를 삭제한다.

 

 

---

3️⃣ EventListener

 

element.addEventListener(event, function, useCapture)

 

🔗 HTML DO Event 목록

HTML DOM Event Object

 

// 📌 EventListener
// <p>Click Me!</p> 를 누르면 text content를 Clicked로 바꾸고 싶음

let paragraphElement = document.querySelector('p');

function changeParagraphText(event) {
    paragraphElement.textContent = 'Clicked';
    console.log('Paragraph clicked!');  //텍스트를 누르면 동작은 한 번 뿐이지만 계속해서 log가 기록된다
    console.log(event);
}

// addEventListener의 두 번째 매개변수에는 함수 이름만 작성한다 (callback function)
paragraphElement.addEventListener('click', changeParagraphText);


let inputElement = document.querySelector('input');

function retrieveUserInput(event) {
    // let enteredText = inputElement.value;
    let enteredText = event.target.value;
    // let enteredText = event.data; => This is different!

    console.log(enteredText);
    console.log(event);
}

inputElement.addEventListener('input', retrieveUserInput);