당신이 모르는 5가지 HTML5 인터페이스 소개_html5 튜토리얼 기술

원본 주소: 당신이 몰랐던 존재하는 HTML5 API 5개
원본 날짜: 2010년 9월 27일
번역 날짜: 2013년 8월 7일
사람들이 "HTML5"라는 단어를 볼 때 "라고 하면 적어도 절반 이상의 사람들은 그녀를 섹시하고 매력적인 미인으로 생각할 것이지만 동시에 당신을 비참하게 만들 수 있는 유니콘으로 생각할 것이라고 추정됩니다. 당연하지 우리 개발자?
기본 API가 오랫동안(아마 1999~2009년) 정체되어 있어 "자리 표시자"와 같은 기본 추가 기능도 처리하는 데 오랜 시간이 걸린다는 사실을 알게 되었습니다.
현재 주류 브라우저는 많은 새로운 HTML5 기능을 구현했지만, 많은 개발자는 이러한 간단하고 유용한 API를 눈치채지 못했습니다.
이 시리즈 기사에서는 이러한 인터페이스 API를 소개하고 더 많은 개발자가 아직 널리 알려지지 않은 API를 탐색하도록 장려하기를 바랍니다.
Element.classList
이 속성은 몇 년 동안 출시되었습니다. classList를 통해 JavaScript를 통해 기본 CSS의 클래스 속성을 조작할 수 있습니다.
코드는 다음과 같습니다. 🎜>

코드 복사코드는 다음과 같습니다.

// classList 속성을 사용합니다( Dom 요소, CSS 클래스 이름)
functionggleClassList(element,cName){
// 1. classList API
// 클래스를 전환하고, 존재하면 제거하고, 없으면 추가
if(element.classList.toggle){
element .classList.toggle(cName);
return true;
}
// 실제로 이 함수가 지원되는 경우 ,
// 그러면 다음 코드는 실행되지 않습니다. 이는 단지 데모용이므로 유연하게 사용하십시오.
// 2. classList API
// 요소의 클래스 속성에 이 CSS 클래스가 포함되어 있는지 여부
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 숨기기 클래스
요소를 제거합니다. classList.remove(cName);
} else {
// 4. classList API
// 숨기기 클래스 추가
element.classList.add(cName)
}
return true;
};

ContextMenu API
테스트 후 chrome28이 작동하지 않습니다. . . 새로운 API인 ContextMenu는 뛰어난 인터페이스입니다. 이 인터페이스를 사용하면 브라우저의 기본 마우스 오른쪽 버튼 클릭 메뉴를 재정의하는 대신 브라우저의 컨텍스트 메뉴(오른쪽 클릭 메뉴)에 메뉴 항목을 쉽게 추가할 수 있습니다.
페이지에서 JS 스크립트를 비활성화할 때 중복되는 HTML 코드를 방지하려면 js 스크립트를 사용하여 메뉴 컨텍스트 메뉴를 동적으로 생성하는 것이 좋습니다.
코드는 다음과 같습니다.

코드를 복사하세요코드는 다음과 같습니다.

보려면 이 영역을 클릭하세요. 메뉴

;





/menuitem>

Element.dataset
Dataset(dataset) API를 사용하면 개발자는 DOM 요소에서 data- 접두사로 시작하는 속성 값을 설정(설정)하고 가져오(가져오기)할 수 있습니다.
코드는 다음과 같습니다.

코드를 복사하세요

코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

function testDataset(){
//
var intro = document.getElementById("intro")// 이 ID는 아닙니다. 속성이지만 data-id
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;// data-blog- URL, 카멜 케이스..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName
//
var msg = "qq:" id
",website:" 웹사이트
",blogUrl:" blogUrl
",myName:" myName

//
warn(msg);
};


말할 것도 없고, classList와 마찬가지로 간단하지만 실용적입니다. (생각해 보세요. 일부 상호 작용과 백그라운드 및 프런트 엔드 JS의 분리가 변경되었나요?)

window.postMessage API

IE8은 몇 년 동안 postMessage API를 지원해 왔으며 이 API는 window를 허용합니다. 및 iframe 요소가 서로 통신합니다. 교차 도메인 지원. 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

// 도메인 1의 창이나 프레임에서 다른 도메인을 호스팅하는 iframe으로 메시지를 보냅니다.

var iframeWindow = document.getElementById("iframe").contentWindow

iframeWindow.postMessage("첫 번째 창에서 안녕하세요. !");
// 다른 호스트의 iframe 내부에서 메시지 수신
window.addEventListener("message", function(event) {
// 보내는 도메인을 신뢰하는지 확인하세요
if(event.origin = = "http://davidwalsh.name") {
// 메시지 로그아웃
console.log(event.data)
// 메시지 보내기
event.source.postMessage ("안녕하세요!");
}
]);
// 메시지는 문자열 형식의 데이터만 허용하지만 JSON.stringify 및 JSON.parse를 사용하여 더 많은 데이터를 전달할 수 있습니다. 의미 있는 메시지.



autofocus 속성

autofocus 속성은 페이지가 로드될 때 특정 BUTTON, INPUT 또는 TEXTAREA 요소에 자동으로 초점을 맞추도록 합니다.

코드 복사

코드는 다음과 같습니다.

안녕하세요!

autofocus 속성은 주로 단순 입력 페이지에서 사용됩니다. 자세한 내용은 autofocus 속성을 참조하세요.
브라우저 제조사마다 이러한 API를 지원하는 방식이 다르기 때문에 사용하기 전에 호환성을 확인하고 읽어보는 것이 가장 좋습니다. 위에 나열된 API에 대해 자세히 알아보고 마스터하게 됩니다.

부분에 대한 테스트 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.