HTML5 규격 문서의 내용 중 3장에 해당하는 내용을 정리한 것입니다. 허접... ㅠ.ㅠ

1. 2011/09/19
권우일(willkwon@infraware.co.kr, @bitroid)
인프라웨어(http://www.infraware.co.kr)
Copyright ©2010 Infraware Inc. All rights reserved.
Confidential and proprietary material for authorized persons only. 1

2. 목차
• Introduction
• Documents
• Elements
• APIs in HTML Documents
• Interactions with Xpath and XSLT*
• Dynamic markup insertion
• Conclusion
Confidential and proprietary material for authorized persons only. 2

3. Introduction
Documents객체구조
HTMLelements별의미및속성과적합한사용
HTMLelements에적용되는속성정의
Element별contentmodel과의미
WebAccessibilityInitiativeAccessibleRichInternetAp
plications관련sementics
동적마크업APIs
Confidential and proprietary material for authorized persons only. 3

4. Documents
Confidential and proprietary material for authorized persons only. 4

5. Documents
• document 객체(DOM)
§ 브라우저에서 모든 XML, HTML 문서는 document
객체에 의해 기술
§ 브라우저에 출력되는 URL에 해당하는 문서 자체
§ HTML or XML
• HTML로 명시되지 않을 경우는 XML로 간주
Confidential and proprietary material for authorized persons only. 5

6. Documents | HTMLDocument interface
[OverrideBuiltins] // user interaction
interface HTMLDocument { readonly attribute WindowProxy defaultView;
// resource metadata management readonly attribute Element activeElement;
[PutForwards=href] readonly attribute Location location; boolean hasFocus();
readonly attribute DOMString URL; attribute DOMString designMode;
attribute DOMString domain; boolean execCommand(in DOMString commandId);
readonly attribute DOMString referrer; boolean execCommand(in DOMString commandId, in boolean showUI);
attribute DOMString cookie; boolean execCommand(in DOMString commandId, in boolean showUI, in DOMString value);
readonly attribute DOMString lastModified; boolean queryCommandEnabled(in DOMString commandId);
readonly attribute DOMString compatMode; boolean queryCommandIndeterm(in DOMString commandId);
attribute DOMString charset; boolean queryCommandState(in DOMString commandId);
readonly attribute DOMString characterSet; boolean queryCommandSupported(in DOMString commandId);
readonly attribute DOMString defaultCharset; DOMString queryCommandValue(in DOMString commandId);
readonly attribute DOMString readyState; readonly attribute HTMLCollection commands;
// DOM tree accessors // event handler IDL attributes
getter any (in DOMString name); attribute Function onabort;
attribute DOMString title; attribute Function onblur;
attribute DOMString dir; attribute Function oncanplay;
attribute HTMLElement body; attribute Function oncanplaythrough;
readonly attribute HTMLHeadElement head; attribute Function onchange;
readonly attribute HTMLCollection images; attribute Function onclick;
readonly attribute HTMLCollection embeds; attribute Function oncontextmenu;
readonly attribute HTMLCollection plugins; attribute Function oncuechange;
readonly attribute HTMLCollection links; attribute Function ondblclick;
readonly attribute HTMLCollection forms; attribute Function ondrag;
readonly attribute HTMLCollection scripts; attribute Function ondragend;
NodeList getElementsByName(in DOMString elementName); attribute Function ondragenter;
NodeList getElementsByClassName(in DOMString classNames); attribute Function ondragleave;
attribute Function ondragover;
// dynamic markup insertion …
attribute DOMString innerHTML; attribute Function onreset;
HTMLDocument open(in optional DOMString type, in optional DOMString replace); attribute Function onscroll;
attribute Function onseeked;
WindowProxy open(in DOMString url, in DOMString name, in DOMString features, in optional b attribute Function onseeking;
oolean replace); attribute Function onselect;
void close(); attribute Function onshow;
void write(in DOMString... text); attribute Function onstalled;
void writeln(in DOMString... text); attribute Function onsubmit;
attribute Function onsuspend;
attribute Function ontimeupdate;
attribute Function onvolumechange;
attribute Function onwaiting;
};
Document implements HTMLDocument;
Confidential and proprietary material for authorized persons only. 6

7. Documents | Other interfaces
• 브라우저는 다른 이름 공간에 대한 문서 인터페
이스도 구현
§ SVGDocument
§ MathML
§ ...
• 보안을 고려
Confidential and proprietary material for authorized persons only. 7

8. Documents | metadata
• document.URL : 문서의 주소
• referrer : 해당 문서로 넘어오기 전 Document의 주소
• cookie : Document에 적용되는 http 쿠키 값
• lastModified
• compatMode : 문서가 올바르다면 “CSS1Compat” 반환
• charset : 동적 변경 가능
• characterSet
• defaultCharset : 브라우저의 기본 인코딩 반환
• readyState
§ readystatechange - loading || complete
Confidential and proprietary material for authorized persons only. 8

9. Documents | DOM tree accessors
• document.head
• title : 문서 제목, 첫 번째 title element, namespace별로 우선권 있음
• body
• images
• embeds
• plugins
각element별HTMLCollection반환
• links
• forms
• scripts
• APIs
divid=example
§ collection = document.getElementsByName(name)
pid=p1class=aaabbb/
§ collection = document.getElementsByClassName(classes) pid=p2class=aaaccc/
pid=p3class=bbbccc/
§ collection = element. getElementsByClassName(classes)
/div
Confidential and proprietary material for authorized persons only. 9

10. Documents | Creating documents
• createDocument() method
[Supplemental,NoInterfaceObject]
interfaceDOMHTMLImplementation{
DocumentcreateHTMLDocument(inDOMStringtitle);
};
DOMImplementationimplementsDOMHTMLImplementation;
§ document = document.implementation.createHTMLDocument(title)
Confidential and proprietary material for authorized persons only. 10

11. Elements
Confidential and proprietary material for authorized persons only. 11

12. Elements | HTMLElement interface
• DOM 내부의 모든 element는 고유한 semantic을 가짐
§ 각 element는 주어진 의미와 목적에 맞게 사용되어야 함
§ 문서의 의미는 동적으로 변화
§ eg. progress element
• 모든 HTML element는 HTMLElement 객체를 기본
인터페이스로 상속
Confidential and proprietary material for authorized persons only. 12

13. Elements | HTMLElement interface
interface HTMLElement : Element {
// DOM tree accessors // event handler IDL attributes
NodeList getElementsByClassName(in DOMString classNames); attribute Function onabort;
attribute Function onblur;
// dynamic markup insertion attribute Function oncanplay;
attribute DOMString innerHTML; attribute Function oncanplaythrough;
attribute DOMString outerHTML; attribute Function onchange;
void insertAdjacentHTML(in DOMString position, in DOMString text); attribute Function onclick;
attribute Function oncontextmenu;
// metadata attributes attribute Function oncuechange;
attribute DOMString id; attribute Function ondblclick;
attribute DOMString title; attribute Function ondrag;
attribute DOMString lang; attribute Function ondragend;
attribute DOMString dir; attribute Function ondragenter;
attribute DOMString className; attribute Function ondragleave;
readonly attribute DOMTokenList classList; attribute Function ondragover;
readonly attribute DOMStringMap dataset; attribute Function ondragstart;
attribute Function ondrop;
// user interaction attribute Function ondurationchange;
attribute boolean hidden; attribute Function onemptied;
void click(); attribute Function onended;
attribute long tabIndex; attribute Function onerror;
void focus(); attribute Function onfocus;
void blur(); attribute Function oninput;
attribute DOMString accessKey; attribute Function oninvalid;
readonly attribute DOMString accessKeyLabel; attribute Function onkeydown;
attribute boolean draggable; attribute Function onkeypress;
[PutForwards=value] attribute DOMSettableTokenList dropzone; attribute Function onkeyup;
attribute DOMString contentEditable; attribute Function onload;
readonly attribute boolean isContentEditable; attribute Function onloadeddata;
attribute HTMLMenuElement contextMenu; attribute Function onloadedmetadata;
attribute boolean spellcheck; attribute Function onloadstart;
attribute Function onmousedown;
// command API attribute Function onmousemove;
readonly attribute DOMString commandType; attribute Function onmouseout;
readonly attribute DOMString label; attribute Function onmouseover;
readonly attribute DOMString icon; attribute Function onmouseup;
readonly attribute boolean disabled; attribute Function onmousewheel;
readonly attribute boolean checked; attribute Function onpause;
// styling attribute Function onplay;
readonly attribute CSSStyleDeclaration style; attribute Function onplaying;
attribute Function onprogress;
…
};
interface HTMLUnknownElement : HTMLElement { };
Confidential and proprietary material for authorized persons only. 13

14. Elements | Global attributes
• 아래 속성은 모든 HTML element에서 사용 가능
• accesskey • onabort
• class • onblur*
• contenteditable • oncanplay
• contextmenu • oncanplaythrough
• dir(ltr, rtl, or auto) • onchange
• draggable • onclick
• dropzone • oncontextmenu
• hidden • oncuechange
• id • ondblclick
• lang • ondrag
• spellcheck • ondragend
• style …
• tabindex • onvolumechange
• title • onwaiting
Confidential and proprietary material for authorized persons only. 14

15. Elements | Global attributes
• data-* attribute
§ *는 최소 한문자 이상의 XML 호환 문자
§ 이름 공간을 가지지 않음
§ 페이지, 또는 응용 프로그램에 종속적인 데이터 저장 용도
• 적절한 데이터 타입이 없을 경우
ol 범용성없는데이터타입
lidata-length=2m11sBeyondTheSea/li
...
/ol
• element.dataset
– DOMStringMap 객체 반환
– eg. data-foo-bar=“” - element.dataset.fooBar 로 변환
Confidential and proprietary material for authorized persons only. 15

16. Elements | Element definitions
• Categories
§ Element가 속한 범주의 목록
• Contexts in which this element can be used
§ Element가 어떤 문맥에서 사용될 수 있는지, content
model과 관련
• Content model
• Content attributes
• DOM interface
Confidential and proprietary material for authorized persons only. 16

17. Elements | Content model
• HTML element가 가질 수 있는 컨텐트의 속성
미분류데이터포함(eg.RDF)
body와응용프로그램에서사용되는대부분의element포함
Confidential and proprietary material for authorized persons only. 17

18. Elements | Content model
heading과footer의범위정의
섹션(sectioningcontent등)의헤더정의
Confidential and proprietary material for authorized persons only. 18

19. Elements | Content model
문서텍스트,또는텍스트내부마크업요소들
다른자원을문서에삽입하는컨텐트,
HTML이름공간에속하지않으면서
내용을포함하는것들
Confidential and proprietary material for authorized persons only. 19

20. Elements | Content model
사용자와상호작용을위한것.
이벤트를발생할수있는것
• Transparent content model
§ 부모 element의 content model을 따르는 element
§ eg.
pobjectparaminsmapahref=/Apples/a/map/ins/object/p
Phrasingcontent Phrasingcontent transparentcontent
Confidential and proprietary material for authorized persons only. 20

21. APIs in HTML documents
• DOM 코어 정의에 따라 API 반환 값의 형태가 변경될 수 있음
• Element.tagname, Node.nodename
§ Element 이름을 ASCII 대문자로 반환
• Document.createElement(arg)
§ 먼저 아규먼트를 소문자로 변환
• Element.[set|get]Attribute()
• Element.[set|get]setAttributeNode()
§ Attribute 이름을 소문자로 치환
• Document.getElementsByTagName(arg)
• Element.getElementsByTagName(arg)
§ 아규먼트는 소문자로 치환
Confidential and proprietary material for authorized persons only. 21

22. Interactionswith
XpathandXSLT
• Xpath와의 상호작용???
• XSLT 처리기는 메서드가 html
이라면 DOM을 출력해야 한
다는 의미
Confidential and proprietary material for authorized persons only. 22

23. Dynamicmarkupinsertion
Confidential and proprietary material for authorized persons only. 23

24. Dynamic markup insertion
• 동적으로 문서에 markup 삽입하는 APIs
• Opening the input stream
§ document = document.open([type[, replace]])
• if type이 생략되거나 “text/html” 이면,
– then, document는 HTML파서와 연결
– else, 평범한 텍스트로 간주
§ window = document.open(url, name, features [, replace])
• window.open() 메서드와 동일
• Closing the input stream
§ document.close()
• document.write(text…)
Confidential and proprietary material for authorized persons only. 24

25. Dynamic markup insertion
• innerHTML
§ innerHTML 노드 내용의 마크업 표시
§ document.innerHTML
§ element.innerHTML
• outerHTML
§ Element와 그 내용의 마크업 표시
§ element.outerHTML
• insertAdjacentHTML
§ element.insertAdjacentHTML(position, text)
• 주어진 문자열, text를 HTML, XML로 파싱하고 그 결과로 생성된 노드를 p
osition 아규먼트가 지정하는 위치에 삽입
Confidential and proprietary material for authorized persons only. 25

26. Conclusion
• Web과 검색엔진의 관계
• Web이 우선인가? 검색엔진이 우선인가?
Confidential and proprietary material for authorized persons only. 26

27. Thank you
Headquarter and Research Institute: Bando B/D 2,3,4,8F, 48-1 Banpo-dong, Seocho-gu, Seoul, KOREA. 137-040 Tel. +82 2 537 0538 Fax. +82 2 535 0534
Beijing Office: Room908, Building 16, China Central Place, No.89, Jian Guo lu Chaoyang District, Beijing, CHINA. Tel. +86 10 65331556/7 Fax. +86 10 65331559
U.S. Office: 3003 North First Street San Jose, CA 95134, U.S.A
Confidential and proprietary material for authorized persons only. 27