까먹어서 다시 정리하는 document 메소드 정리

 

document 객체는 쉽게 말해서 현재 웹 페이지를 나타내는 객체라고 생각하면 편하다

 

---

 

getElementById(id) : 저장된 아이디를 가진 HTML 요소를 찾아 반환

 

딱 하나 밖에 없는 고유한 속성을 가지고 있는 HTML 요소에 적용해줄 때 사용하며 

자바스크립트를 이용해서 코딩을 하다보면 가장 자주 보게 된다

<div class="winner-container" id="winnerContainer"> </div>

document.getElementById('winnerContainer').style.display = 'block';

위는 winnerContainer 요소에 display 속성으로 block 으로 지정하는 내용으로

getElementById 사용한 간단한 예시이다

 

---

querySelector(selector) : 특정 조건을 만족하는 여러 엘리먼트 중 원하는 것 선택한 후 반환

querySelector의 적용 예시를 들어보자면 

<div class="hi">안녕</div>
<div id="hi">안녕</div>

document.querySelector(".hi");
document.querySelector("#hi");

이런식으로 하나의 div에 class랑 id가 있을 때 다르게 적용해 줄 수 있다.

참고로 class는 (".hi") 로 id는 ("#hi")으로 나타낸다.

 

---

innerHTML : 지정된 요소의 내부 HTML을 가져오거나 설정

기존 내용을 수정하거나 가죠올 때 사용한다고 생각하면 된다.

<div id="hi">innerHTML 예시</div>

var hello = document.getElementById("hi");
hello.innerHTML = "<p>수정된 내용</p>";

 

---

 

createElement(tagName) : 새로운 HTML 요소 생성

이건 TO DO LIST 처럼 처음엔 없다가 뭘 작성하면 보여지게 할 때(새로운 요소 생성) 사용한다.

  filteredList.forEach((item, index) => {
  const checkboxId = `checkbox_${index}`;
 const listItem = document.createElement('div');

이건 투 두 리스트의 일부분으로  filteredList에 아이템이 추가되면

아이템리스트를 나열할 div이 생성되는 내용이다