Today, I Learned

• DOM이란 무엇인가, 그리고, 자바스크립트와 무슨 관계에 있는가
• DOM을 일종의 '편리한 도구'라고 했을 때(Document Object를 관리하게 해주는), 이를 바탕으로, Javascript 언어와 함께 elements를 Create, Append, Read, Update, Delete(CRUD)하는 법을 배웠다
  • Create : createElement, createDocumentFragment(둘의 차이점 기억하기 : 복수의 태그를 넣을 때 div에 넣어서 append 하던지, fragment를 생성해서 거기에 넣어서 append 하던지)
  • Read : querySelector(말그대로, 셀렉터를 이용한 쿼리문!이라고 생각), querySelectorAll
  • Append : append() vs appendChild() 차이점 알아두기(앞은 자바스크립트 함수이고, 뒤는 DOM인 점이 힌트), append vs prepend(push vs unshift와 유사함)
  • Update : textContent vs innerHTML(보안상의 차이로 전자가 승리), division 등의 속성을 변경시켜주는 메서드 기억하기[idList.add/ classList.add()/ input.setAttribute('name', 'input1']
  • Delete : remove(), innerHTML, removeChild
• Point는 DOM을 통해 HTML에 '접근이 가능'해지고, 그 접근 가능한 조건을 이용해서 자바스크립트(or the other languages)로 관리 혹은 조작을 하는 것이다
• 자바스크립트 => HTML or XML 등의 Document Object에 직접 접근할 수 없는 상황에서 DOM이 징검다리 역할을 하는 것
• Document Object는 말그대로 객체이기에 자바스크립트와 같이 쓸 수 있다. 거기에는 객체답게 각종 속성과 메서드가 들어가 있고, 우리는 그것을 쓸 수 있다
• Twittler 목업 사이트 구현 : 역시 division 나누는게 제일 어려운 것 같다. 정확히 말하면, division을 나눠서 내가 원하는 위치에 원하는 요소를 놓는 css position, box-model 등이 어려운 것 같다.

Planning to Study

• CRUD 중에 D부분 보완(further study 공부 keep)
• css word-wrap, word-break + css positioning 보완
• 목업 사이트 layout 보완