댓글 : 군중의 "HTML5"에 대해 이야기 할 때, 당신은 이국적인 댄서 나 유니콘이 집 한가운데에 오는 것처럼 느낄 수 있습니다.
이것은 우리가 헛된 것이라고 말할 수 없습니다. 기본 HTML API는 지난 몇 년 동안 개발되지 않았으므로 자리 표시 자와 같은 작은 새로운 기능이 나타날 때 우리에게 새로운 모습을 줄 것입니다. 많은 HTML5 기능이 새로운 브라우저에서 구현되지만 대부분의 프로그래머는 여전히 작고 매우 유용한 API를 알지 못하거나 들어 본 적이 없습니다. 이 기사에서는 그러한 API를 소개하고 모든 사람들이 알려지지 않은 HTML5 API를 발견 할 수 있도록 환영합니다!
요소 .classlist
클래스리스트 API는 JavaScript 도구 라이브러리를 사용하여 수년 동안 구현 한 CSS를 제어하는 기본 기능을 제공합니다.
// CSS 클래스를 추가합니다
mylement.classlist.add ( "NewClass");
// CSS 클래스를 삭제합니다
mylement.classlist.remove ( "기존 클래스");
// CSS 클래스가 있는지 확인하십시오
mylement.classlist.contains ( "oneclass");
// CSS 클래스의 존재 여부를 반전
mylement.classlist.toggle ( "Otherclass");
이 새로 떠오르는 API의 주요 가치는 단순하고 실용적입니다.
ContextMenu API
이 새로운 ContextMenu API는 매우 유용합니다. 원래 마우스 오른쪽 버튼 클릭 메뉴를 대체하지 않지만 브라우저의 마우스 오른쪽 버튼 클릭 메뉴에 사용자 정의 마우스 오른쪽 버튼 클릭 메뉴를 추가합니다.
<섹션 contextmenu = "mymenu">
<!-추가 메뉴->
<메뉴 유형 = "Context">
<menuitem label = "새로 고침"icon = "/images/refresh-icon.png"> </menuitem>
<메뉴 레이블 = "공유 on ..."icon = "/images/share_icon.gif">
<menuitem label = "twitter"icon = "/images/twitter_icon.gif"> </menuitem>
<menuitem label = "Facebook"icon = "/images/facebook_icon16x16.gif"> </menuitem>
</메뉴>
</메뉴>
</섹션>
메뉴 이벤트는 결국 JavaScript를 호출하여 작업을 실행하기 때문에 JavaScript를 사용하여 이러한 메뉴 코드를 동적으로 만드는 것이 가장 좋습니다. 사용자가 JavaScript를 금지하는 경우 마우스 오른쪽 버튼 클릭 메뉴가 생성되지 않으며 동시에 메뉴가 표시되지 않습니다.
요소 .dataset
데이터 세트 API를 사용하여 프로그래머는 데이터를 쉽게 얻거나 설정할 수 있습니다.* 사용자 정의 속성 :
/* 다음 코드는 예입니다
<div data-name = "mydiv"data-id = "myid"data-my-custom-key = "이것은 값입니다"> </div>
*/
// 요소를 얻습니다
var element = document.getElementById ( "myDiv");
// ID를 얻습니다
var id = element.dataset.id;
// "data-my-custom-key"의 값을 읽습니다.
var customkey = element.dataset.myCustomKey;
// 다른 값으로 수정합니다
요소 .dataset.myCustomKey = "일부 다른 값";
// 결과 :
// <div data-name = "mydiv"data-id = "myid"data-my-custom-key = "일부 다른 값"> </div>
말할 것도없이, 그것은 클래스리스트만큼 간단하고 실용적입니다.
Window.postMessage API
IE8조차도 수년간 Message Postmessage API를 지원했습니다. PostMessage API의 기능은 두 브라우저 Windows 또는 iframes 사이에 정보 데이터를 전달할 수 있다는 것입니다.
// 도메인 a의 창 또는 iframe에서 도메인의 창 또는 ifame에 메시지를 보냅니다.
var iframewindow = document.getElementById ( "iframe"). contentwindow;
iframewindow.postmessage ( "첫 번째 창에서 인사말!"); </p> <p> // 두 번째 다른 도메인에서 창에서 메시지를 받거나 iframe
window.addeventListener ( "메시지", function (event) {
// 도메인의 합법성을 테스트합니다
if (event.origin == "http://www.vevb.com") {
// 로그 정보를 출력합니다
console.log (event.data);
// 피드백 메시지
event.source.postmessage ( "어떻게 괜찮아!");
}
]);
메시지 본문은 문자열 일 수 있지만 json.stringify 및 json.parse를 사용하여 메시지를보다 의미있는 데이터 본문으로 변환 할 수 있습니다!
자동 초점 속성
자동 초점 속성은 페이지가로드되면 버튼, 입력 또는 텍스트 요소를 자동으로 페이지의 초점이 될 수 있습니다.
<input autofocus = "autofocus" />
<버튼 AUTOFOCUS = "AUTOFOCUS"> HI! </button>
<TextArea autofocus = "autofocus"> </textArea>
고정 패턴이있는 Google 검색 페이지와 같은 장소에서는 자동 초점 속성이 이상적인 기능입니다.
브라우저는 각 API를 약간 다르게 지원하므로 사용하기 전에 이러한 기능에 대한 지원을 확인하십시오. 시간을내어 각 API에 대한 자세한 설명을 읽으면 더 많은 것을 찾을 수 있다고 생각합니다.