JavaScript 문서 개체 모델-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 표준 모드를 ​​나타냅니다.

contain() 메서드

DOM을 운영할 때 특정 노드가 다른 노드의 자손 노드인지 확인해야 하는 경우가 종종 있습니다. IE 브라우저는 전체 DOM 트리를 탐색하지 않고도 이 정보를 얻을 수 있는 contain() 메소드를 처음 도입했습니다. Contains() 메소드는 검색의 시작점으로 조상 노드에서 호출되어야 하며, 이 메소드는 검색할 자손 노드인 하나의 매개변수를 받습니다. 전달된 노드가 현재 노드의 자손이면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 예를 들어

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

위의 예에서는

요소가 요소의 하위 요소인지 테스트합니다. 그러면 true가 반환됩니다.

IE, Safari3+, Opera8+ 및 Chrome 브라우저는 모두 contain() 메서드를 지원합니다.

Firefox 브라우저는 contain() 메서드를 지원하지 않지만 Firefox는 DOM3 수준에서 대체 메서드인 CompareDocumentPosition() 메서드를 구현합니다. (Opera9.5+ 브라우저도 이 방법을 지원합니다). 이 메서드는 두 노드 사이의 관계를 확인하는 데 사용되며 관계를 나타내는 비트마스크(비트마크)를 반환합니다. 이 비트마스크의 값은 다음 표에 나열되어 있습니다.

contains() 메소드를 모방해야 한다면 마스크 16에 주목해야 합니다. CompareDocumentPosition() 메서드의 결과에 대해 비트 AND 연산을 수행하여 참조 노드(비교DocumentPosition() 메서드가 호출된 현재 노드)에 지정된 노드(인수로 전달된 노드)가 포함되어 있는지 확인할 수 있습니다. 예를 들어, 다음 예는 다음과 같습니다.

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

비교DocumentPosition() 메서드를 실행한 후 위 코드는 20이라는 결과를 얻습니다. 이는 "뒤로" 4 및 "포함됨"을 의미합니다. 16. 그런 다음 마스크 16에 대한 비트별 AND 연산은 0이 아닌 값을 반환합니다. 두 개의 논리적 NOT 연산자는 숫자 값을 부울 값 유형으로 변환하는 데 사용됩니다.

브라우저 기능 감지를 통해 일반적인 contain() 함수를 작성할 수 있습니다.

/*********************************************************/
/* 浏览器通用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;
    }
}

이 일반 contain() 함수는 3가지 방법을 사용하여 노드가 다른 노드의 자손 노드인지 확인합니다. 함수의 첫 번째 매개변수는 참조 노드이고, 두 번째 매개변수는 감지할 노드입니다.

함수 본문에서 먼저 refNode에 contain() 메서드가 있는지 확인한 다음, CompareDocumentPosition() 메서드가 있는지 확인합니다. 함수의 마지막 단계는 DOM 트리를 위쪽으로 순회하는 것입니다. otherNode에서 parentNode를 재귀적으로 획득하고 refNode와 동일한지 확인합니다. 문서 트리 상단에서 parentNode의 값이 null이고 루프가 종료됩니다.

위 내용은 JavaScript Document Object Model-DOM Extension 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!