JavaScript DOM 작업 개선

웹 프론트엔드로서 브라우저의 차이를 다루고 이해하는 것은 중요한 문제입니다. 다음은 제가 작업 중 메모한 내용을 요약하여 소개합니다. 먼저 js 라이브러리를 사용하지 않은 상황을 소개하겠습니다.

1. setAttribute 메소드는 요소 클래스 이름을 설정합니다. jQuery에서는 attr() 메소드를 직접 사용할 수 있고, 네이티브 JS에서는

element.setAttribute(class,newClassName) // 이는 W3C 표준으로 W3C 표준과 호환되는 브라우저에서만 유효합니다. 단, 국내 사용자에게는 IE가 메인 테마입니다.
element.setAttribute(className, newClassName) //이 설정은 IE에서만 유효합니다
element .className = newClassName //모든 브라우저에서 유효합니다(javascript를 지원하는 한)
좋습니다. 시작은 여기까지입니다. 이 글의 목적은 브라우저 간의 차이점을 소개하고 프런트엔드 친구들에게 방법을 알려주는 것입니다. 가장 효과적인 방법을 사용하려면 문제를 해결하고 아래에서 계속하세요.

　2. FireFox에는 window.event 객체가 없고, 이벤트 객체만 IE에서는 window.event만 지원하는 반면, 다른 주류 브라우저는 둘 다 지원하므로 일반적으로 다음과 같이 작성됩니다.

함수 핸들( e)
{
e = e || event;
...
}
　3. DOMContentLoaded 이벤트 원칙: window.onload 이벤트는 페이지 구문 분석/DOM 트리 구축이 완료되면 그림, 스크립트, 스타일시트 등 모든 리소스의 다운로드가 완료된 후 트리거됩니다. 이는 사용자 경험에 영향을 미치는 많은 실제 응용 프로그램에 비해 너무 "늦은" 시간입니다. 이 문제를 해결하기 위해 FF에 DOMContentLoaded 메서드가 추가되었습니다. onload와 비교하여 이 메서드는 다른 리소스가 로드될 때까지 기다리지 않고 페이지의 DOM 콘텐츠가 로드된 후에 트리거됩니다. jquery.ready() 이벤트의 구현 원리입니다).

//다음은 jQuery 1.4.2 버전의 원본 분석입니다

bindReady: function() {
　if (readyBound ) {
　 return;
　}
ReadyBound = true;
//
// 브라우저 이벤트가 이미 발생한 후에 $(document).ready()가 호출되는 경우를 포착합니다.
if ( document.readyState === "complete " ) {
　 return jQuery.ready();
　document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
　　 // window.onload로 대체, 항상 작동함
　window. addEventListener( "load", jQuery.ready, false );
　　 // IE 이벤트 모델을 사용하는 경우
　} else if ( document.attachEvent ) {
　 // 온로드 전 실행을 보장합니다.
　 / / 늦었지만 iframe에도 안전합니다
　document.attachEvent("onreadystatechange", DOMContentLoaded);
　　　 // window.onload로 대체, 항상 작동함
　　window.attachEvent( "onload", jQuery .ready );
　　 // IE이고 프레임이 아닌 경우
　 // 문서가 준비되었는지 지속적으로 확인
　var toplevel = false;
try {
　toplevel = window.frameElement == null;
} catch(e) { }
　if (document.documentElement.doScroll && toplevel) {
　doScrollCheck();
　　}
　}
}
디자인 아이디어 - Webkit과 Firefox를 동일하게 처리합니다. 둘 다 DOMContentLoaded 이벤트를 직접 등록하지만 Webkit은 버전 525 이상에서 도입되었으므로 호환성 위험이 있습니다. IE의 경우 먼저 문서의 onreadystatechange 이벤트를 등록하세요. 이 메서드는 window.onload와 동일하며 트리거되기 전에 모든 리소스가 다운로드될 때까지 기다립니다. 이후 IE이고 해당 페이지가 iframe에 없는 것으로 확인되면 호출이 성공하고 DOMContentLoaded가 트리거될 때까지 setTiemout을 통해 documentElement의 doScroll 메서드를 계속 호출합니다. 1 IE에 대한 jQuery 솔루션의 원칙은 IE에서 DOM 구문 분석이 완료된 후에만 DOM 구문 분석이 완료되는 방식입니다. 프로토타입에 document.write를 사용하면 이 솔루션은 페이지에 iframe이 있을 때 발생하는 오류 문제를 해결할 수 있습니다. 그리고 jQuery는 페이지가 iframe에 있을 때 이 메서드가 실패할 것을 걱정하는 것 같아서 구현 코드에서 판단을 내립니다. iframe에 있으면 문서의 onreadystatechange를 통해 구현됩니다. doScroll을 통해 구현됩니다. 그러나 테스트 후에도 doScroll은 iframe에서도 여전히 효과적입니다.

4. IE의 조건부 주석 사용법을 알아보세요. 많은 프론트엔드들이 항상 사악한 IE에 대해 불평하고 있습니다. 실제로 호환성 문제를 다루는 것은 점점 더 역겨운 일이 될 것입니다. 그러나 변경할 수 있는 방법은 없습니다. 그렇다면 즐기십시오...

< -[IE 5인 경우]>

버전 5