오늘은 twittler라는 과제를 진행하면서 1차 멘붕이 왔다. HTML구조를 만들고 CSS를 이용해서 기본 틀을 만드는것은 얼추 만들었지만 자바스크립트를 사용해서 기능화하는 것은 생각보다 쉬운일이 아니었다.
차근차근 수도코드를 짜면서 해봤지만 문제자체를 제대로 숙지하고 있지 못하다는 생각이들었다. 그래서 레퍼런스들을 참고해가면서 내 코드랑 비교를 해보았다.
아직 백프로 이해는 안가지만 대충 왜 그렇게 작동하는지는 알것 같다. 내일 함수를 작성해보면서 알게된 것들을 더 자세하게 기록해 보아야겠다.
*짧게나마 배운것들을 정히해보자
document.dir을 쳐보면
HTML을 객체 형태로써 확인해서 볼 수 있다.
몇가지 속성들
태그이름: tagName
Id: id
class 목록: classList
class 문자열: className
속성 객체: attributes
스타일 객체: style
엘리먼트에 담긴 내용: innerHTML, interText, textContent
form 입력 값:value
--> .속성을 입력하면 바로 콘솔창에서 볼수 있다.
자식 엘리먼트: children
부모 엘리먼트: parentElement
자식 노드: childNodes
data-* 속성에 담긴값: dataset
이벤트 객체: onclick, onkey, onchange, onmouseover, etc.
1. inner html 와 textcontent의 차이점
-inner html은 내용과 html 태그 전부다 콘솔창에 뜨는 것을 볼 수 있다.
inner html 같은 경우는 모든 내용을 전부 바꿔주거나 변화를 줄때 사용하면 좋을 것같다.
-textcontent는 화면상에 보이는것 외에도 포함된 공백과 모든것을 콘솔창에 띄워준다.
text content는 특정 엘리먼트에 담긴 내용을 바꿀때 쓰면 좋을것 같다!
2. form 입력값
value를 사용해서 입력값을 확인 및 변경 할 수 있다.
