この記事では、現在または近い将来に使用できるDOM APIの最新情報について説明します。
この記事の公開は、Google Chrome
でいくつかの新しいDOM4 APIメソッドの
実装が開始されたという楽しいイベントに捧げられています。 現在、多くのメソッドとプロパティを使用できますが、それらの一部はプレフィックスを介して動作しますが、メソッドまたはプロパティごとに、それらを実装するか、ブラウザプレフィックスを破棄するPolyfillを指定しようとします。
Google Closure CompilerのJSDocに従ってメソッドを記述しようとし
ました 。
DOM4突然変異メソッド
仕様書Element.prototypeは、jQueryの愛好家になじみのある非常に興味深いメソッドがいくつかありますが、それらはわずかに異なる方法で機能します。
append(...{(Node|string)})prepend(...{(Node|string)})before(...{(Node|string)})after(...{(Node|string)})
このメソッドは、n番目のノードを現在のノードに挿入します。 ノードは引数として関数に渡されます（例： node.append(otherNode1, otherNode2) 。
これにより、ノードの代わりにテキストを渡すことができ、 document.createTextNode(text)呼び出したかのように、自動的にTextNodeに変換されdocument.createTextNode(text) 。
append関数は、ノードのリストの最後にノードを挿入after現在のノードのbefore関数の先頭、 beforeにそれぞれ追加します。
remove()
このメソッドは、親から現在のノードを削除します。replace(...{(Node|string)})
メソッドは、現在のノードをメソッドパラメーターとして指定された1つ以上のノードに置き換えます。
これらのメソッドはすべて戻り値を持ちません。
このようなパターンを使用すると、
NodeListまたはノードを持つ配列をこのメソッドに渡すことができます。
element.append.apply(element, document.querySelectorAll("div"))
6つのメソッドのうちの2つが
document appendされました：
appendと
prepend 。
すべてのDOM4 Mutationメソッドのうち、最新バージョンのGoogle Chromeでは
removeのみ
remove 実装されています。
すべてのブラウザのこれらのメソッドのポリフィルは、私のライブラリにあります。DOM Selector API 2：NodeRefおよび：スコープ
仕様書document.querySelector(string, NodeRef{(Node|NodeList|Array.<Node>)})document.querySelectorAll(string, NodeRef{(Node|NodeList|Array.<Node>)})document.find(string, NodeRef{(Node|NodeList|Array.<Node>)})document.findAll(string, NodeRef{(Node|NodeList|Array.<Node>)})
古き良きquerySelector [All]メソッドは2番目のパラメーターを取得しましたが、
documentの実装のみです。 また、新しいメソッドfind [All]が追加されました。
2番目のパラメーターでは、セレクターでノードを検索するコンテキストを指定できます。 例：
document.findAll("li", [ulElement1, ulElement2])
2つの要素
ulElement1および
ulElement2内のすべての
<li>要素を
見つけます。
：スコープ擬似クラスを使用すると、本当にクールなことができます。 これは、検索コンテキストを指定する別の方法です。セレクターで検索する現在の要素を指します。
これにより、以前は無効だったセレクター "> .class"または "〜tagname"で検索できます。 最初に
スコープを指定するだけで、これらのセレクタが有効になります。 すべての力
：スコープは次の場合に表示されます
NodeRefと一緒に適用します。
document.querySelectorAll(":scope > p", [divElement1, divElement2])
divElement1と
divElement2のタグ
pを持つすべての
直接の子を見つけます！
findおよび
findAll擬似クラス
：スコープを
findAllできることに注意してください。 これらのメソッドでは、そのような呼び出しは有効と見なされます。
document.findAll("> p", [divElement1, divElement2])
WebKitは現在、スコープ疑似クラスをサポートして
いますが、
間違って
います。 幸いなことに、バグレポートの後、間違ったサポート
：スコープ が削除されます。 この擬似クラスの真のサポートを確認する必要がある場合は、このコード
gistをご覧ください。
現在実行中の仕様に一致するquerySelectorAll 内の find[All]および：スコープのサポート。Element.prototype.matches
仕様書このメソッドは、以前は
matchesSelectorと呼ばれてい
ました 。 CSSセレクターに対してノードをチェックします。
ブラウザーのプレフィックスを削除した小さなポリフィル：gist。 私のライブラリのより高度なバージョン。仕様書要素のCSSクラスを操作するためのDOM API。
方法
add(...class{string}) element.classNameに クラスを追加しadd(...class{string})
remove(...class{string}) element.classNameからクラスを削除します
toggle(boolean: class{string}) element.classNameからクラス が存在する場合は削除し、 falseを返します 。 element.classNameがない場合に追加し、 trueを返します 。contains(boolean: class{string}) element.classNameの クラスをチェックします。 それぞれtrueまたはfalseを返します。
以前は、
addメソッドと
removeメソッドは一度に1つのクラスでしか機能しませんでしたが、最近、いくつかのCSSクラスで
機能する機能
が標準に
追加さ
れました 。
document.documentElement.classList.add("test1", "test2", "test3") document.documentElement.classList.remove("test1", "test2", "test3")
classListのclassListは、古い仕様ですが、私のライブラリにあります。 新しいバージョンがまもなく利用可能になり、古い実装にパッチが適用されます。イベントコンストラクター
仕様書新しいDOM API標準は、イベントコンストラクターを定義します。 今、私たちはとの苦しみを忘れることができます
event = document.createEvent("click") event.initMouseEvent( )
そして次のように書きます：
event = new Event("click")
任意のテキスト値を
e.typeとして
e.type渡すことができます
e.type番目のパラメーターは、初期化パラメーター
bubblesおよび
cancelableを含むオブジェクトです。
バブルを
falseに設定する
と 、イベントがポップアップしなくなります。
cancelableを
falseに設定する
と 、
preventDefaultメソッドを介してイベント
が キャンセルされなくなり
ます 。
デフォルトでは、
バブルと
キャンセル可能は
falseです。
event = new Event("some:event", {bubbles : true, cancelable : false}) event = new Event("dbclick1") element.dispachEvent(event)
ハンドラーのデータを追加する必要がある場合は、
eventオブジェクトに追加するだけです。
event = new Event("click") event.button = 1
この場合、この方法で作成されたすべてのイベントは
通常のイベント、つまり
new Event("click")は
MouseEventを作成するのではなく、単に
Eventを作成し
ます 。
イベントを作成するための2番目のクラスは
CustomEventです。 このクラスの使用は、初期化オブジェクトに
詳細プロパティを渡すことができるという点でのみ異なります。
event = new CustomEvent("somecustom:event", {bubbles : true, cancelable : false, detail : {"some data" : 123}})
Eventおよび
CustomEvent 、Android WebKitブラウザーを除くすべての最新ブラウザー（1年以上）に実装されています。
古いブラウザ用のポリフィル 。また、キーボード、ドラッグアンドドロップ、およびマウスの特別なイベントに関するディスカッションもあります。 しかし、これまでのところ、どのブラウザにも実装されていません。
（注：
Opera 12.10はKeyboardEventのコンストラクターをサポートしますが、 仕様に従って動作しません）HTMLLabelElement.prototype.controlおよびHTML *フォーム要素のElement.prototype.labels
制御仕様コントロールプロパティには、この
<label>要素が関連付けられて
いるフォーム要素へ
のリンクが含まれています。
label.control.value = "123"
仕様上、単一の
<label>要素に関連付けることができるフォーム要素は1つだけです。
ラベルの仕様一方、
labelsプロパティには、フォーム要素の
<label>要素のNodeListが含まれます。 NodeListは、仕様上、単一の
フォーム要素に複数の関連
<label>要素を含めることができるためです。
console.log(input.labels.length)
プロパティはほとんどのブラウザに実装されています。
古いブラウザ用のポリフィルHTMLOlElement.prototype.reversed
仕様書番号付きリストの
逆のプロパティにより、番号付けは反対方向になります。 これには、
開始プロパティが考慮されます。 以下に、より多くの単語を言う簡単な例を示します。
<ol reversed> <li> 1</li> <li> 2</li> <li> 3</li> <li> 4</li> <li> 5</li> </ol>
ブラウザによって次のように解釈されます。
5.リスト項目1
4.リスト項目2
3.リスト項目3
2.リスト項目4
1.リストアイテム5
そして、このマークアップ：
<ol reversed start=100> <li> 1</li> <li> 2</li> <li> 3</li> <li> 4</li> <li> 5</li> </ol>
ブラウザによって次のように解釈されます。
100.リストアイテム1
99.リストアイテム2
98.リスト項目3
97.リスト項目4
96.リストアイテム5
リバースプロパティのサポートはGoogle Chromeにあります。
他のブラウザにはPolyfillがあります 。Event.prototype.stopImmediatePropagation
仕様書このメソッドは
、jQueryの同じ
メソッドと同様に機能します。
つまり、イベントポップアップを停止するだけでなく、次のイベントハンドラーを実行せずにイベントを
すぐに処理します。
バージョン12.10より前のOperaのみがこの方法をサポートしていません。
彼女のためのポリフィル 。IE <9をサポート
IE8にはDOMオブジェクトのプロトタイプがあるため、サポートの追加は簡単です。 IE8のポリフィルを
別のファイルに入れ、
Conditional Commentsを介して添付し
ます 。
IE6 / 7では、すべてがより複雑です。これらのブラウザーを放棄して、DOM APIを完全または完全に実装する必要があります。これは、
IE <8を含むすべてのブラウザーの記事
DOM-shimで説明しました。
記事コードはgithubに投稿されています。 あなたが助けたり、間違いを見つけたいなら、プルリクエストをするか、私に個人的に書いてください。 また、トピックをより詳細に検討する必要がある場合や、より多くの例が必要な場合は、コメントを書き込んでください。