[멋사 프론트엔드 스쿨]10월 14일 금요일 TIL_DOM

DOM

• 찾아서 저장하고 사용한다
• 변수 선언할 땐 const 위주로 작성하는 편, 재할당이 필요하면 let
• 키값이 인덱스 형태로 되어 있는 경우를 '유사 배열' 이라 한다
• 탐색은 document부터 할 필요는 없다
  장점: 페이지 로딩 속도가 빨라진다 > SEO에도 영향(정보를 빨리 찾을 수 있어 사용자 편리성이 높아진다)
• HTMLCollection / NodeList 차이점?
  HTMLCollection은 라이브 돔(실시간으로 바뀌는 자료형)이다
• toggle : 클래스가 있으면 넣어주고, 없으면 빼준다
  스타일을 주고 자바스크립트로 제어해 많이 사용한다
• contain : 클래스가 있는지 확인한다
  조건문에서 활용할 수 있다 ex) ??d클래스가 있다면 ~~
• 실습 타임
  HTML, CSS부터 짠다
  먼저 뭘 할지 모르겠다면 큰 것부터 선언해 하나 하나 찾아 낸다
  DOMDOM
• button 은 type click
  myInput 은 type input

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText#%EC%98%88%EC%A0%9C

HTMLElement.innerText - Web API | MDN

• textContent 는 날것을 뱉고,
  innerText 는 HTML은 흡수해서 텍스트만 가공해서 뱉는다

https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML#security_considerations

Element.innerHTML - Web API | MDN

 

오늘 배운 것들로 캐러셀 과제와 밴딩머신을 구현할 수 있게 되었다^^!

 

9시~11시 조원들과 게더에서 벤딩머신 코드리뷰

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

box-sizing - CSS: Cascading Style Sheets | MDN

 

나같은 경우 '잔액', '소지금', '원' 같이 고정된 값은 가상요소를 주었는데,

가상요소에도 자바스크립트로 선택이 가능한지 알아봐야할 부분이다