[HTML5] 9장 추가된 DOM과 자바스크립트

MIME 타입이나 프로토콜에 웹 애플리케이션 연결

HTML5부터 window.navigator 객체에 추가된 registerProtocolHandler() 메서드와 registerContentHandler() 메서드를 사용하면 임의의 프로토콜이나 MIME 타입에 대해 웹 애플리케이션을 연결할 수 있다. 예를 들어 'fax'라는 프로토콜을 팩스 웹 서비스에 연결해두면 이후 사용자가 'fax:'로 시작하는 URL에 접근할 때 팩스 웹 서비스가 처리를 대신하게 된다.

//첫 번째 인수에는 웹 애플리케이션에 연결하고 싶은 URL 스키마를 지정
window.navigator.registerProtocolHandler(scheme, url, title)

//MIME 타입 지정시에 대,소문자 구별하지 않아도 된다
window.navigator.registerContentHandler(mimeType, url, title)

스키마 이름 다음의 콜론은 필요없다(ex 'fax'). 위 메서드는 모두 두번째 인수에 URL을 지정하며 이 URL에 포함된 '%s'라는 문자열은 연결된 웹 애플리케이션으로 보내는 파라미터가 된다. 세 번째 인수인 title은 사용자가 웹 애플리케이션을 식별하기 위한 명칭이 된다.

//trans-en-ko 프로토콜을 Google 번역에 연결함
navigator.registerProtocolHandler("trans-en-ko", "http://translate.google.co.kr/translate?js=y&prev=...%s", Google 영한 번역");

위 코드를 실행하면 "<웹 애플리케이션>을 trans-en-ko 프로토콜 용의 프로그램으로 추가하시겠습니까? " 라는 확인 메세지가 뜬다. 이때 [프로그램추가]버튼을 클릭하면 연결하기가 완료되며 이 상태에서 'trans-en-ko:'로 시작하는 URL을 포함하는 하이퍼링크를 클릭하면 된다.

대화상자가 표시되며 URL처리를 웹 애플리케이션에 맡겨도 되냐고 묻게 된다. 영한 번역을 선택하고 OK

<!-- WHATWG URL에서 프로토콜 부분을 trans-en-ko로 바꿈 -->
<a href="trans-en-ko://www.whatwg.org/">WHATWG</a>

registerContentHandler()도 이용 방법은 거의 마찬가지다. 프로토콜 대신 MIME 타입을 지정하여 특정 MIME 타입으로 배포되는 리소스에 웹 애플리케이션을 연결할 수 있다.

DOM 조작을 편하게 하는 API

className

HTML5에서는 ID나 태그이름 뿐만 아니라 클래스 이름도 참조하게 되었다.

document.getElementsByClassName(className);
element.getElementsByClassName(className);

클래스의 이름을 지정하면 class 속성값에 그 클래스 이름이 포함된 요소의 목록을 얻을 수 있다. 인수에는 클래스 이름을 문자열로 전달한다(공백을 구분자로 하여 여러개를 지정할 수 있다).

<div id="div1" class="a b">1</div>
<div id="block">
    <div id="div2" class="b c">2</div>
    <div id="div3" class="a b c">3</div>
</div>

//div1, div3이 반환됨
document.getElementsByClassName("a");
//div2, div3이 반환됨
document.getElementsByClassName("b c");
//div3이 반환됨
document.getElementById("block").getElementsByClassName("a");

innerHTML

요소안의 HTML 소스를 문자열로 얻으며 속성에 값을 지정할 수도 있다.

//innerHTML 속성에 값을 지정
document.getElementById("message").innerHTML="<span class='error'>에러가 발생</span>";

innerHTML 속성은 이미 많은 브라우저가 지원하고 있으므로 많이 알고 있으나 HTML5에서 처음 표준화됬다.

outerHTML

innerHTML이 요소 안쪽을 대상으로 하는 것에 반해 outerHTML은 요소 자신도 포함하는 HTML 소소를 문자열로 반환한다.

<div id="abc">ABC</div>

//결과는 'ABC'
alert(document.getElementById("abc").innerHTML);
//결과는 '<div id="abc">ABC</div>'
alert(document.getElementById("abc").outerHTML);

outerHTML에 값을 지정할 수도 있는데 값을 지정하면 대상요소는 삭제되고 지정된 HTML 문자열이 그 요소를 대신한다.

insertAdjacentHTML

요소 안쪽 혹은 바깥쪽에 대해 HTML을 삽입할 수 있다. 삽입 위치는 첫 번째 인수로 지정

var ol = document.getElementsByTagName("ol")[0];
ol.insertAdjacentHTML("afterbegin", "<li>딸기</li>");

아래는 첫 번째 인수의 속성과 설명이다.

속성	설명
beforebegin	시작 태그 앞 즉, 요소의 바로 앞
afterbegin	시작 태그 뒤 즉, 첫 자식 요소가 됨
beforeend	종료 태그 앞 즉, 마지막 자식 요소가 됨
afterend	종료 태그 뒤 즉, 요소의 바로 뒤

classList

요소의 클래스 조작은 매우 흔하게 일어나는 일임에도 이러한 조작을 처리하려면 저 레벨의 문자열을 처리해야 하기 때문에 코딩이 번잡해지는 원인도 된다. 이러한 문제를 해결하려고 HTML5부터는 class 속성값을 간단히 다룰수 있도록 classList라는 속성이 추가 되엇다. classList 속성에 접근하면 다음과 같은 메서드를 가진 문자열 목록이 반환된다.

메서드	설명
length	목록에 포함된 문자열의 개수
item(index)	인덱스를 지정하여 문자열을 얻음
contains(string)	목록 안에 문자열이 있는지 확인
add(string)	목록에 문자열을 추가
remove(string)	목록으로 부터 문자열을 제거
toggle(string)	목록에 문자열이 있으면 제거하고 그렇지 않으면 추가함

//클래스 이름으로 부터 'error'를 제거
msg.classList.remove("error");

querySelector

document.querySelector(selectors);
document.querySelectorAll(selectors);

이 API를 사용하면 css 셀렉터를 이용하여 요소를 선택할 수 있으며 정식으로 HTML5에 포함되진 않았지만 대부분의 브라우저에서 지원하고 있다.

document.querySelector("#box"); //아이디가 box인 요소 선택