[JavaScript]DOM拡張


1.表示モード
W 3 CのDOMに対する要求に応じて、ブラウザは、自身で属性と方法を追加して、機能を向上させることができる.DOMを拡張する方法はすでにかなり一般的で、開発にも大きなメリットがあります.
IE 6が標準モードと混雑モードの区別を開始するにつれて、ブラウザがどのモードにあるかを決定する必要がある.IEは、documentオブジェクトのために、ブラウザがどのようなモードにあるかを識別するために、comptMode属性を追加しました.標準モードであれば、document.co mpatModeの値は「CSS 1 Comppat」に等しいです.混雑モードであれば、document.com Modeの値は「BackComppat」に等しいです.
その後、Firefox、Opera、Safari、Chromeがこの属性を実現しました.IE 8はまた、documentオブジェクトという新しい属性を導入しました.IE 8には3つの異なる提示モードがあるので、この属性を導入するのはこれらのモードを識別するためである.この属性の値が5であれば、混雑モードを表し、7であれば、IE 7シミュレーションモードを表し、8であれば、IE 8標準モード、例えば、
if (document.documentMode > 7) {
  alert("IE8+ Standards Mode");
}
2.スクロール
DOM仕様はページ領域をスクロールする方法について規定していません.このため、各種ブラウザは、スクロールを制御するための様々な方法を実現しており、これらの方法はすべてHTMLELE mentタイプの拡張として存在するので、すべての要素で使用することができます.
1)scrollIntoView(align WithTop):ブラウザウィンドウまたはコンテナ要素をスクロールさせて、ビューの中に現在の要素を見る.
2)scrollIntoViewIfNeed:現在の要素が視認できない場合にのみ、ブラウザウィンドウまたはコンテナ要素をスクロールさせ、最終的には現在の要素を可視化する.
3)scrollByLiness:要素の内容をスクロールして指定する行数の高さは、正または負の値とすることができます.
4)scrollByPages:要素のコンテンツをスクロールさせて指定されたページの高さを、要素の高さによって特定します.SafariとChromeがこの方法を実現しました.
scrollIntoView()とscrollIntoViewIfNeedd()は元素のウィンドウで、scrollByLiness()とscrollByPages()は元素自身に影響を与えます.
3.チルドレン属性
IEは他のブラウザとテキストノードにおける空白の解釈が一致しないため、チルドレン属性の出現をもたらす.HTMLCollectionとして、チルドレン属性には要素だけが含まれているサブノードの中にも要素のノードがあります.すなわち、要素のサブノードが要素ノードである場合には、チルドレン属性はチルドレンと同じであり、例えば、
var childCount = element.children.length;
var firstChild = element.children[0];
Firefoxを除いて、他のブラウザはすべてchildren集合をサポートします.IE中のチルドレンの集合は注釈ノードを含む.
4.contains()方法
開発者は、あるノードが別のノードの子孫であるかどうかを判断する必要があり、IEが最初にcontains()を導入する方法は、この情報を知ることができる.
alert(document.documentElement.contains(document.body));
IE、Safari 3およびより高いバージョン、Opera 8およびより高いバージョン、Chromeはcontains()方法をサポートします.Firefoxはサポートされていませんが、FirefoxはDOM 3レベル実装において代替的なcompreDocuntPosition()方法を提供しています.
5.操作内容
テキストやHTMLコードなどを挿入する機能を提供するために、IE 4は先にinnerText、innerHTML、outerText、outerHTMLなどの属性を導入した.
innerText属性により、要素に含まれているすべてのテキスト内容が操作できます.ブラウザによっては、空白文字を処理する方法が異なりますので、出力されたテキストは、元のHTMLコードのインデントを含まない可能性もあります.例えば、
mydiv.innerText = "Hello World!";
innerTextを設定すると、現在のノードのサブテキストノードが生成されますので、テキストはHTML符号化されます.この点を利用してHTMLタグをフィルタすることができます.
mydiv.innerText = mydiv.innerText;
IE、Safari、Opera、ChromeはinnerText属性をサポートします.Firefoxはサポートされていませんが、サポート機能は似たようなtextContent属性です.
innerHTMLとinnerTextは多くの点で似ています.innerHTMLは、要素、コメント、およびテキストノードを含む現在の要素のすべてのサブノードのHTML表現を返します.別のブラウザでは、innerHTMLのテキストが異なる場合があります.IEとOperaは常にすべてのラベルを大文字に変換し、Safari、Chrome、Firefoxはドキュメントで指定された形式でHTMLに返信する.
innerHTMLにもいくつかの制限があります.例えば、多くのブラウザでは、innerHTMLを介して挿入された「script」要素は実行されません.IEはこのような動作をサポートする唯一のブラウザであるが、defer特性を指定しなければならない.多くのブラウザでは、innerHTMLを通じて