HTML5で見逃せないAPIやヒントのまとめ

これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点を当ててきました。今回も引き続き、そのいくつかをまとめていきます。
1)要素.classList
詳細については、
https://developer.mozilla.org/en-US/docs/DOM/element.classList
ここで簡単に紹介します。これは実際には、add、remove、toggle、contains などのメソッドを含む、要素のクラスをすばやく操作するための新しい DOM API です。
myDiv.classList.add('myCssClass');
myDiv.classList.remove('myCssClass');
myDiv.classList.toggle('myCssClass'); //これで追加されました
myDiv.classList.toggle('myCssClass'); //これで削除されました
myDiv.classList.contains('myCssClass'); //true または false を返します
現在のブラウザのサポートは次のとおりです:
Chrome 8.0 以上、IE 10、Opera 11.5、Safari 5.1
2)ContextMenu コンテキストメニューAPI
このAPIはHTML 5用で、ユーザーが素早く選択して表示できる、次のようなシンプルなクリック可能なコンテキストメニューを生成するために使用されます。

コードをコピー

コードは次のとおりです。

<セクションコンテキストメニュー="mymenu">


<メニュータイプ="コンテキスト" id="マイメニュー">
<menuitem label="投稿を更新" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
<menu label="共有..." icon="/images/share_icon.gif">
<menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);"></menuitem>
<menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
</メニュー>
</メニュー>
</セクション>

3)要素.データセット
この API は、キーと値のペアを取得するのに役立ちます。
例えば：

コードをコピー

コードは次のとおりです。

次に、次のようにしてキーと値のペアを取得できます。これは、jQuery Mobile で非常に便利です。

コードをコピー

コードは次のとおりです。

// 要素を取得する
var 要素 = document.getElementById("myDiv");
// ID を取得
var id = 要素.データセット.id;
// データを取得-私のカスタムキー"
var customKey = element.dataset.myCustomKey;
// 新しい値を設定する
element.dataset.myCustomKey = "その他の値";

4) postMessage API
これは実際には IE 8 以降でサポートされており、異なるドメインの iframe でのメッセージ配信をサポートできます。

コードをコピー

コードは次のとおりです。

// ドメイン 1 のウィンドウまたはフレームから、別のドメインをホストする iframe にメッセージを送信します。
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("最初のウィンドウからこんにちは！");
// 別のホストのiframe内からメッセージを受信
window.addEventListener("メッセージ", 関数(イベント) {
イベントの起源が「http://davidwalsh.name」の場合{
// メッセージをログアウトする
console.log(イベントデータ);
// メッセージを返信する
event.source.postMessage("こんにちは！");
}
]);

5) オートフォーカス
これは非常にシンプルで、コントロールに自動的に焦点を合わせます

コードをコピー

コードは次のとおりです。

<input autofocus="オートフォーカス" />
<button autofocus="autofocus">こんにちは!</button>
<テキストエリア autofocus="オートフォーカス"></テキストエリア>

<<: 効率的な視覚化Nginxログ表示ツール

>>: Vue で SuperMap を使用する練習