HTML5_html5 チュートリアル スキルにおける 5 つのシンプルで実用的な API

これは私たちの無駄とは言えませんが、長年にわたって基本的な HTML API がまったく開発されていないため、プレースホルダーなどの小さな新しい機能が登場すると、それが目新しさを感じてしまいます。多くの HTML5 機能が最新のブラウザーに実装されていますが、ほとんどのプログラマーは、いくつかの小さくて非常に便利な API をまだ知らないか、聞いたこともありません。この記事では、そのような API をいくつか紹介します。皆さんも、さらに未知の HTML5 API を発見してください。

Element.classList

classList API は、JavaScript ツール ライブラリを使用して長年実装してきた CSS を制御する基本機能を提供します:

コードをコピー

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

// CSS クラスを追加します
myElement.classList.add("newClass");
// CSS クラスを削除します
myElement.classList.remove("existingClass");
// CSS クラスがあるかどうかを確認します
myElement.classList.contains("oneClass");
// CSS クラスの存在を反転します
myElement.classList.toggle("anotherClass");

この新しい API の主な価値は、シンプルで実用的であることです。

ContextMenu API

この新しい ContextMenu API は非常に便利です。元の右クリック メニューを置き換えるのではなく、カスタムの右クリック メニューをブラウザの右クリック メニューに追加します。

コードをコピーします

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

これらのメニュー コードを動的に作成するには JavaScript を使用するのが最善であることに注意してください。これは、ユーザーが JavaScript を無効にすると、メニュー イベントが最終的に JavaScript を呼び出してタスクを実行するためです。同時にメニューは表示されません。

Element.dataset

データセット API を使用すると、プログラマーはデータ * カスタム属性を簡単に取得または設定できます:

コードをコピーします

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

/* 次のコードを取得します。例として

*/
// 要素を取得
var element = document.getElementById("myDiv");
// ID を取得
var id = element.dataset.id;
// 「data -my-custom-key」の値を読み取ります
varcustomKey = element.dataset.myCustomKey;
// 他の値に変更します
element.dataset.myCustomKey = "その他の値";
// 結果は次のようになります:
//

classList と同じように、シンプルで実用的で、これ以上言う必要はありません

window.postMessage API

IE8 でも、長年にわたり postMessage API をサポートしてきました。postMessage API の機能は、2 つのブラウザ ウィンドウまたは iframe 間で情報データを転送できるようにすることです:

コードをコピー

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

// ドメイン A のウィンドウまたは iframe から、ドメイン B のウィンドウまたは iframe にメッセージを送信します
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("最初のウィンドウからこんにちは!");

//2 番目の異なるドメインのウィンドウまたは iframe でメッセージを受信します
window.addEventListener("message", function(event) {
// ドメインの有効性をチェックします
if( event.origin == "http://www.jb51.net") {
// ログ情報を出力します
console.log(event.data);
// フィードバックメッセージ
イベント。 source.postMessage("あなたも元気ですか!");
}
]);

メッセージ本文には文字列のみを使用できますが、JSON.stringify と JSON.parse を使用してメッセージをより意味のあるデータ本文に変換できます。

オートフォーカス属性

autofocus 属性を使用すると、ページが読み込まれるときに、BUTTON、INPUT、または TEXTAREA 要素が自動的にページ フォーカスになります:

コードをコピー

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

こんにちは!ボタン>
< ;textarea autofocus="autofocus">

Google 検索ページのような固定パターンがある場所では、オートフォーカス属性が最も理想的な機能です。

各 API に対するブラウザのサポートは若干異なるため、使用する前にこれらの機能のサポートを確認してください。時間をかけて各 API の詳細な説明を読んでください。さらに多くのことがわかると思います。