JavaScript ドキュメントオブジェクトモデル - DOM 拡張機能-jsチュートリアル-php.cn

JavaScript ドキュメントオブジェクトモデル - DOM 拡張機能

黄舟

リリース： 2017-01-20 14:44:23

オリジナル

1235 人が閲覧しました

DOM に対する W3C の要件に従って、ブラウザーは DOM に独自にプロパティとメソッドを追加して、その機能を強化できます。新機能の一部は下位互換性のためのものですが、その他は一般的な問題に関する開発者のフィードバックに基づいて追加されています。

プレゼンテーションモード

IE6 以降、IE ブラウザは標準モードと混合モードを区別するため、ブラウザを使用するときにどのモードであるかを区別する必要があります。 IE は、compatMode という属性をドキュメントオブジェクトに追加します。この属性の唯一の役割は、ブラウザーがどのモードであるかを識別することです。たとえば、次の例では、標準モードの場合、document.compatMode の値は「CSS1Compat」に等しく、混合モードの場合、document.compatMode の値は「BackCompat」に等しくなります。

if(document.compatMode == "CSS1Compat"){
    alert("标准模式");
}else{
    alert("混杂模式");
}

ログイン後にコピー

IE 以降、Firefox、Chrome、Opera ブラウザにもこの属性が実装されました。 Safari ブラウザは、バージョン 3.1 以降、 document.compatMode プロパティを実装します。

その後、IE8 では、ドキュメントオブジェクトに documentMode と呼ばれる新しいプロパティが導入されました。使用方法を以下に示します。

if(document.compatMode > 7){
    alert("IE8+ 标准模式");
}

ログイン後にコピー

これは、IE8 には 3 つの異なるレンダリングモードがあり、この属性はこれらのモードを区別するために正確に導入されているためです。この属性の値が 5 の場合は混合モード (IE5 モード) を示し、値が 7 の場合は IE7 エミュレーションモードを示し、8 の場合は IE8 標準モードを示します。

contains() メソッド

DOM を操作するとき、特定のノードが別のノードの子孫ノードであるかどうかを判断する必要があることがよくあります。 IE ブラウザでは、DOM ツリー全体を走査せずにこの情報を取得できる contains() メソッドが初めて導入されました。 contains() メソッドは、検索の開始点として祖先ノードで呼び出される必要があります。このメソッドは、検出される子孫ノードである 1 つのパラメーターを受け取ります。渡されたノードが現在のノードの子孫である場合は true を返し、それ以外の場合は false を返します。たとえば、

alert(document.documentElement.contains(document.body));   //true

ログイン後にコピー

要素が要素の子孫であるかどうかをテストします。それが適切にフォーマットされた HTML ページである場合、true を返します。

IE、Safari3+、Opera8+、および Chrome ブラウザはすべて contains() メソッドをサポートしています。

Firefox ブラウザは contains() メソッドをサポートしていませんが、Firefox は DOM3 レベルで代替メソッドであるcompareDocumentPosition() メソッドを実装しています。 (Opera9.5 以降のブラウザもこの方法をサポートしています)。このメソッドは 2 つのノード間の関係を決定するために使用され、関係を表すビットマスク (ビットマーク) を返します。このビットマスクの値を次の表に示します。

JavaScript ドキュメントオブジェクトモデル - DOM 拡張機能

contains() メソッドを模倣する必要がある場合は、マスク 16 に注意する必要があります。 CompareDocumentPosition() メソッドの結果に対してビットごとの AND 演算を実行して、参照ノード (compareDocumentPosition() メソッドが呼び出された現在のノード) に指定されたノード (引数として渡されたノード) が含まれているかどうかを判断できます。たとえば、次の例:

var result = document.documentElement.compareDocumentPosition(document.body);
console.info("result="+result);
console.info("按位与操作后的布尔值结果为："+!!(result & 16));

ログイン後にコピー

JavaScript ドキュメントオブジェクトモデル - DOM 拡張機能

上記のコードでcompareDocumentPosition()メソッドを実行した後、得られる結果は20で、これは「後方」4と「含まれる」16を意味します。次に、マスク 16 に対するビット単位の AND 演算により、ゼロ以外の値が返されます。 2 つの論理 NOT 演算子は、数値をブール値タイプに変換するために使用されます。

ブラウザの機能検出を通じて、一般的な contains() 関数を作成できます。

/*********************************************************/
/* 浏览器通用contains()方法
/* 参数：refNode - 参考节点 */
/* 参数：otherNode - 要检测的节点 */
/* 返回值： refNode包含otherNode是返回true，否则返回false*/
/*********************************************************/
function contains(refNode,otherNode){
    if(typeof refNode.contains == "function"){
        return refNode.contains(otherNode);
    }else if(typeof refNode.compareDocumentPosition == "function"){
        return !!(refNode.compareDocumentPosition(otherNode) & 16);
    }else{
        var node = otherNode.parentNode;
        do{
            if (node === refNode) {
                return true;
            }else{
                node = node.parentNode;
            }
        }while(node !== null);
        return false;
    }
}

ログイン後にコピー

この一般的な contains() 関数は 3 つのメソッドを使用して、ノードが別のノードの子孫ノードであるかどうかを判断します。関数の最初のパラメータは参照ノード、2 番目のパラメータは検出されるノードです。

関数本体では、最初に refNode に contains() メソッドが存在するかどうかを確認し、次に、compareDocumentPosition() メソッドがあるかどうかを確認します。関数の最後のステップは、otherNode から開始して DOM ツリーを上方向に走査し、再帰的に取得することです。 parentNode を調べて、それが refNode と等しいかどうかを確認します。ドキュメントツリーの最上位では、parentNode の値が null に等しくなり、ループが終了します。

上記は JavaScript Document Object Model-DOM 拡張機能の内容です。さらに関連する内容については、PHP 中国語 Web サイト (m.sbmmt.com) をご覧ください。