ES6+ 자바스크립트 중요 개념 정리 🔑 - DOM 선택 및 조작

.textContent & .innerHTML

h2.textContent = "<h2>Feedback<h2>"
h2.innerHTML = "<h2>Feedback<h2>"

• textContent : <h2>Feedback</h2> 요소가 화면에 노출이 됩니다
• innerHTML : 태그안에 텍스트만 반환되게 됩니다

---

.setAttribute & .removeAttribute

h2.setAttribute('class', "red");
h2.removeAttribute("class");

• removeAttribute("class") : ("삭제할 속성")
• setAttribute('class', 'item') : ("부여해줄 속성", "속성 이름")

---

HTML 요소 스타일링

h2.style.color = "red"
h2.classList.add('red');

// css
.red {
	color: red;
}

• JavaScript로 HTML 요소를 스타일링하는 두 가지 방법은 다음과 같습니다.
• .style 속성을 사용해 개별 스타일을 직접 설정하는 방법
• .classList.add() or .classList.remove() 를 사용하여 미리 정의된 CSS 클래스를 추가하거나 제거하는 방법

---

동적으로 HTML 요소 추가하기 .createElement() .appendChild() .insertBefore()

const li = document.createElement('li'); # <li></li>
li.textContent = "평범"; # <li>평범</li>
li.classList.add('item') # <li class="item">평범</li>
document.querySelector('ul').appendChild(li);

• .createElement() : 지정한 tagName의 빈 HTML 요소를 생성합니다
• .appendChild() : 맨 마지막 자식요소로 추가합니다
• 위와 같은 코드를 작성한다면, 기존 평범, 불만족, 만족에서 어떻게 변화할지 그려지나요? 
• .insertBefore(tag, target) : 함수를 활용해 타겟을 지정해서 추가할 수 있습니다. insert tag before target 이라는 뜻입니다

정답

---

동적으로 HTML 요소 제거하기 .remove()

//HTML Script
<li class="item">평범</li>
<li class="item">불만족</li>
<li class="item">만족</li>

//javascript
const li = document.querySelectorAll('li');
li[2].remove();

• .remove : 요소를 제거합니다.
• 다음과 같이 li[2].remove()를 진행한다면, 어떤 요소가 삭제될까요?

정답

<li class="item">만족</li>