TIL 2023.06.02

오늘 공부 계획 및 공부한 내용📝

• addeventlistener 오류 다시 파기 ㅇ
• DOM 개념 재정립 ㅇ
• self 내 코드 리뷰 🔺보충하기
• 조원들이랑 최종 코드 리뷰 ㅇ

문제🧐 / 해결과정⚒️

1) innerHTML, innerText, textContent 속성
사실 이번 개인과제 하면서 innerHTML 속성을 처음 사용해봤다 ㅎ
비슷한 속성들이 있던데 그것들과 어떤 차이가 있는지 궁금해 실험해봤다...!
innerHTML 속성 사용 👇🏻

  const temp = document.createElement('div');
            temp.className = 'movie-card';

            temp.innerHTML = `<div class="img">
                                <img src="https://image.tmdb.org/t/p/w500${image}">
                            </div>
                            <div class="card-text">
                                <h3>${title}</h3>
                                <p>${overview}</p>
                                </br>
                                <h2>${vote}</h2>
                            </div>`;
            //화면에 적용하기 위해 부모 노드를 .card-list로 설정하고 접근한 상태에서 append 메소드 사용
            document.querySelector('.card-list').append(temp);

문제 없이 태그 효과까지 다 적용되어 출력됨.

innerText 속성 사용 👇🏻 (textContent 사용했을 때도 이와 비슷)

innerHTML : 이름 그대로 HTML을 반환
innerText : 렌더링 된 텍스트 그대로 출력(눈에 보이는 것만 반환)
textContent : script 태그와 style태그를 비롯한 모든 요소의 텍스트 출력
(눈에 보이지 않는 값까지 반환)
참고 블로그