내일배움캠프 82일차

1. 오늘 내가 한 일!

드디어 프로젝트 마지막 날이다!
내일이면 최종 프로젝트 발표,,,😎
오늘은 지금까지 작성해온 프로젝트들을 정리 및 수정, 발표 준비를 했다!
피피티 제작, 노션 정리, 댓글 부분을 약간 수정했다.

2. 알게 된 것!

- value, textContent, innerHTML, innerText

- value

input과 같은 form 요소의 값을 가져오고 싶을 때 사용!

- textContent

div나 span 등의 요소 안에 있는 text를 읽고 싶을 때 사용!
잘 사용되진 않는다!

마크업 태그를 제외한 모든 문자열을 읽고 변경할 수 있다.
innerHTML은 textContent에 비해서 매번 스타일링까지 적용해서 헤비한 메소드이다.
따라서 textContent를 이용하는 것이 성능적으로 좋은 퍼포먼스를 보인다.

innerText와 다른 점은 innerText는 사용자에게 보이지 않는 텍스트 값은 가져오지 않지만, textContent는 마크업 태그를 제외한 텍스트라면 모두 불러들일 수 있다.

document.getElementById("div1").innerText
//출력 : good evening hello ya

- innerHTML

html 태그 요소들까지 입력해서 직접 변경할 수 있다!

document.getElementById("div1").innerHTML
//출력 : good evening <span>hello<span>
<span style="display:none;">ya</span>

- innerText

마크업 언어가 적용된 상태로 읽어온다.
즉 태그와 마크업 언어와 같은 태그값은 불러들이지 않는다!
또한 사용자가 보이는 상태 style등 마크업 언어가 적용된 상태이다.
따라서 사용자에게 보이지 않는 값들은 아예 불러들이지 않는다. 즉 display : none; 한 값들은 불러들이지 않는다.

document.getElementById("div1").innerText
//출력 : good evening hello