[DOM] 김영보 Document Object Model 이해 - 3

Selector는 패턴에 매치되는 노드를 추출하는 것이다. Selector를 배워보자 

Selector

패턴사용은 div[class] 이다. 스펙 참조. 

"querySelector vs querySelectorAll" : finding element

엘리먼트를 추출한다. querySelector는 하나만 찾고, querySelectorAll은 모두 찾아준다. 

DOM Query Selector-1 on jsbin.com

"Selector Attribute, Selector-Pseudo"

li:nth-child 같은 것은 Selector-Pseudo 이다. 

CSS

Cascading Style Sheet. 콘텐츠의 표현. HTML 엘리먼트에 CSS 적용. 모바일에서 SVG의 용도는 Zoom In/Out해도 깨지지 않는 해상도를 지원한다. 

"Rule Set"

CSS를 설정하는 규칙 

className {

  key: value;

}

"HTML 엘러먼트에 스타일 적용 순서"

디폴트 스타일 < 사용자 스타일 < 개발자 스타일

개발자 스타일이 가장 높음.

"Default Style"

<h1>이 <h2>가 큰 것은 디폴트 스타일에서 적용되어 있기 때문이다. (스펙 참조)

"사용자 Style"

브라우저에 스타일 지정이 가능하다. IE에서만 가능 (옵션에서 사용자 스타일 파일을 지정해 주면 된다.) 예로 만일 파란색을 강제로 브라우저레벨에서 노란색으로 보고 싶을 경우 사용한다. 

"개발자 Style"

개발자 Style 에서 !important 사용은 많이 고려한다. 가장 우선하기 때문이다. 

"DOM View는 최종적으로 스타일이 적용된 상태이다."

최종으로 적용된 스타일 추출로 DocumentView, AbstractView 인터페이스가 있다. 

"getComputedStyle() 은 우선순위에 의해 최종적으로 스타일이 적용된 결과값을 준다."

IE는 currentStyle이다. 

DOM CSS compoutedStyle on jsbin.com

Ajax

"Asynchronous JavaScript + XML"

Jesse James Garrett이 2005년 2월 18일 블로그에 썼다. 제목은 A New Application to Web Application으로 웹 애플리케이션이라 말을 처음 거론함. 이전은 마크업으로 말함. 

"JJG의 원문 블로그를 읽자" 

AJAX는 기술이 아니다. = "XHTML/CSS" + "XML/XLST" + "XMLHttpRequest(XHR)" + "DOM" + "JavaScript" 현재는 "XHTML/CSS"는 "HTML5"가 되고, "XML/XLST"는 사용 안한다. 각 요소기술을 AJAX라고 부른다. 

"XMLHttpRequest는 HTTP 통신 오브젝트이다."

비동기 통신을 하여 데이터 송수신 한다. XMLHttpRequest가 Ajax가 아니라 Ajax라 통칭하는 개념의 일부 요소기술이다. 

"Ajax Web Application Model"

비동기로 받은 데이터를 DOM 제어를 통해 반영한다. Web Application이 복잡해 지면서 MVC, MV* 패턴들이 나온다. 

"동기, 비동기 통신의 차이"

동기는 요청을 보낸 후 응답이 오기전까지 사용자의 액티비티를 할 수 없다. 비동기는 요청과 상관없이 사용자 액티비티가 가능하다.