오늘 배운 것

DOM

Document Object Model

HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델

1. 브라우저 콘솔을 통해 HTML 속성에 접근하기

• 브라우저 콘솔에 console.dir(document)을 입력하면 HTML문서를 객체의 형태로 볼 수 있음

• 또 확인하고 싶은 Element를 선택한 후 console.dir($0)를 입력하면 해당 요소를 객체형태로 확인 가능

• 이를 통해 자바스크립트를 이용해 HTML에 접근할 수 있다는 것을 알 수 있음

• 어떤 요소의 태그이름을 확인하고 싶다면, $0.tagName을 통해 알 수 있음

• DOM을 조작하며 알아두면 좋은 속성들

속성	속성 이름
태그 이름	tagName
id	id
class 목록	classList
class 문자열	className
속성 객체	attributes
스타일 객체	style
엘리먼트에 담긴 내용(값 할당 가능)	innerHTML, textContent
form 입력 값	value
자식 엘리먼트	children
부모 엘리먼트	parentElement
자식 노드	childNodes
data-* 속성에 담긴 값	dataset
이벤트	onclick, onmouseover, onkeyup 등
좌표 정보 (기준점에 따라 다름)	offsetTop, offsetLeft scrollTop, scrollLeft clientTop, clientLeft
크기 정보 (기준점에 따라 다름)	offsetWidth, offsetHeight scrollWidth, scrollHeight clientWidth, clientHeight

2. .querySlector()

• 앞서 $0을 이용한 방법에 대해 알아봤다. 이 경우에는 브라우저 콘솔에서만 사용할 수 있고, 일일이 클릭을 해서 지정해야한다는 번거로움이 있다.
• querySelector()를 이용하면 편집기에서 이용이 가능하고, id나 class, 태그 값을 입력해서 해당 요소를 선택할 수 있다.
• 예를 들어 id값이 "user"라는 요소가 있다면 document.querySelector("#user")를 입력하여 해당 요소를 객체형태로 받을 수 있다.
• querySelectorAll()의 경우 class나 태그가 겹치는 경우 해당하는 모든 요소를 배열형태로 받아오게 된다.

오늘 하루

1. Twittler 목업을 구현해봤다. HTML, CSS을 이용해 껍데기만 만들어봤는데 생각보다 어려웠다. 그리고 디자인에는 큰 재능이 없다는 점을 깨달아버렸.... ㅎ
2. 이제 DOM을 이용해서 웹을 만들어야하는데 어...... 솔직히 말하면 일단 오늘은 쿼리셀렉터까지밖에 이해를 못했다. 여기서 뭐 어떻게 함수를 이용하라는 것인지 전혀 감이 안 온다 ㅠㅠㅠ 일단 오늘은 목업만드는 것까지 과제라 다행이긴 한데... 미리 내일할 걸 보고 있는데 영 감이 안온다..... 크흠..