コメント：群衆の中で「html5」について話すとき、「私はクール、私はそれを知っている」という明確な意味で家の真ん中に来るエキゾチックなダンサーやユニコーンのように感じるかもしれません
これは私たちが無駄だとは言えません。基本的なHTML APIは過去数年間開発されていないため、プレースホルダーなどの小さな新しい機能が表示されると、斬新な外観が得られます。多くのHTML5機能は新しいブラウザに実装されていますが、ほとんどのプログラマーはまだわずかな非常に有用なAPIを知らないか、聞いたことがありません。この記事では、このようなAPIを紹介し、より未知のHTML5 APIを発見するように皆さんを歓迎します！
element.classlist
クラスリストAPIは、JavaScriptツールライブラリを使用して長年にわたって実装してきたCSSを制御する基本的な機能を提供します。
// CSSクラスを追加します
myelement.classlist.add（ "newclass"）;
// CSSクラスを削除します
myelement.classlist.remove（ "既存のクラス"）;
// CSSクラスがあるかどうかを確認します
myelement.classlist.contains（ "oneclass"）;
// CSSクラスの存在を逆転または逆転させない
myelement.classlist.toggle（ "AnotherClass"）;
この新たに出現するAPIの主な値は、シンプルで実用的です。
ContextMenu API
この新しいContextMenu APIは非常に便利です。元の右クリックメニューを置き換えるわけではありませんが、ブラウザの右クリックメニューにカスタム右クリックメニューを追加します。
<セクションContextMenu = "mymenu">
<！ - メニューを追加 - >
<メニュータイプ= "context">
<menuitem label = "Refresh Post" Icon = "/images/refreed-icon.png"> </menuitem>
<メニューラベル= "Share on ..." Icon = "/images/share_icon.gif">
<menuitem label = "twitter" icon = "/images/twitter_icon.gif"> </menuitem>
<menuitem label = "facebook" icon = "/mages/facebook_icon16x16.gif"> </menuitem>
</メニュー>
</メニュー>
</section>
メニューイベントは最終的にJavaScriptを呼び出してタスクを実行するため、JavaScriptを使用してこれらのメニューコードを動的に作成することをお勧めします。ユーザーがJavaScriptを禁止している場合、右クリックメニューは生成されず、同時にメニューが表示されません。
element.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;
//他の値に変更します
element.dataset.mycustomkey = "他の値";
// 消す：
// <div data-name = "mydiv" data-id = "myid" data-my-custom-key = "他の値"> </div>
言うまでもなく、それはクラスリストと同じくらいシンプルで実用的です
window.postmessage api
IE8でさえ、長年にわたってMessage APIをサポートしてきました。 Postmessage APIの機能は、2つのブラウザウィンドウまたはIFRAMEの間で情報データを渡すことができることです。
//ドメインAのウィンドウまたはiframeから、ドメインBのウィンドウまたはifameにメッセージを送信します。
var iframewindow = document.getElementById（ "iframe"）。contentWindow;
iframewindow.postmessage（ "最初のウィンドウからの挨拶！"）; </p> <p> //ウィンドウでメッセージを受信したり、2番目の異なるドメインでiframeを受け取ったりします
window.addeventlistener（ "message"、function（event）{
//ドメインの合法性をテストします
if（event.origin == "http://www.vevb.com"）{
//ログ情報の出力
console.log（event.data）;
//フィードバックメッセージ
event.source.postmessage（ "どうやって大丈夫！"）;
}
]）;
メッセージ本文は文字列にすぎませんが、json.stringifyとjson.parseを使用して、メッセージをより意味のあるデータボディに変換できます。
オートフォーカス属性
オートフォーカス属性は、ページがロードされたときにボタン、入力、またはテキストエレメントを自動的にページの焦点にすることができます。
<input autofocus = "autofocus" />
<button autofocus = "autofocus"> hi！</button>
<textarea autofocus = "autofocus"> </textarea>
固定パターンのGoogle検索ページのような場所では、オートフォーカスプロパティが理想的な機能です。
ブラウザは各APIをわずかに異なってサポートしているため、使用する前にこれらの機能のサポートを確認してください。各APIの詳細な説明を読む時間をかけてください。