新しいDOM API

この記事では、現在または近い将来に使用できる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。 私のライブラリのより高度なバージョン。

classList

仕様書



要素の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に投稿されています。 あなたが助けたり、間違いを見つけたいなら、プルリクエストをするか、私に個人的に書いてください。 また、トピックをより詳細に検討する必要がある場合や、より多くの例が必要な場合は、コメントを書き込んでください。