var cell = document.createElement("td");
var cell_text = document.createTextNode("콘텐츠 삽입");
cell.appendChild(cell_text);
row.appendChild (셀);
document.getElementsByTagName("tbody")[0].appendChild(row);
6. 노드 제거removeNode() 및removeChild()
【분석 설명】appendNode는 IE와 Firefox에서 정상적으로 사용할 수 있지만, RemoveNode는 IE에서만 사용할 수 있습니다.
removeNode 메소드의 기능은 노드를 삭제하는 것입니다. 구문은 node.removeNode(false) 또는 node.removeNode(true)입니다. 반환 값은 삭제된 노드입니다.
removeNode(false)는 지정된 노드만 삭제한 후 이 노드의 원래 하위 노드를 원래 상위 노드의 하위 노드로 승격시키는 것을 의미합니다.
removeNode(true)는 지정된 노드와 모든 하위 노드를 삭제하는 것을 의미합니다. 삭제된 노드는 고아 노드가 되며 더 이상 하위 노드와 상위 노드를 갖지 않습니다.
[호환성 처리] Firefox에는 노드에 대한 RemoveNode 메소드가 없으며, RemoveChild 메소드로만 교체할 수 있습니다. 먼저 상위 노드로 복귀한 후 상위 노드에서 제거할 노드를 제거합니다.
node.parentNode.removeChild(노드);
// IE와 Firefox에서 정상적으로 작동하려면 이전 레이어의 상위 노드를 가져온 다음 제거하세요.
7. childNodes가 획득한 노드
[분석 설명] IE와 Firefox에서는 childNodes의 첨자의 의미가 다릅니다. 다음 코드를 살펴보세요.
- 1
- 3
나!" onclick=
"alert(document.getElementById('main').childNodes.length)">
각각 IE와 Firefox로 실행하면 IE의 결과는 3, Firefox의 결과는 7입니다. Firefox는 DOM 사양을 사용합니다. "#text"는 텍스트(실제로 의미 없는 공백 및 줄 바꿈 등)를 나타냅니다. IE에서는 실제 의미가 있는 텍스트만 "#text"로 구문 분석됩니다. ". .
【호환 처리】
방법 1: 하위 노드를 얻을 때 node.getElementsByTagName()을 사용하면 이 문제를 피할 수 있습니다. 그러나 복잡한 DOM 구조 탐색에서는 getElementsByTagName이 childNodes만큼 좋지 않습니다. 왜냐하면 childNodes가 DOM 계층 구조를 더 잘 처리할 수 있기 때문입니다.
방법 2: 실제 애플리케이션에서 Firefox가 하위 노드를 순회할 때 for 루프에
를 추가하는 것이 좋습니다.
if(childNode.nodeName=="#text") continue;//또는 nodeType == 1을 사용하세요.
이렇게 하면 일부 텍스트 노드를 건너뛸 수 있습니다.
확장 독서
"IE와 FireFox의 childNodes의 차이점"
8. Firefox는 innerText를 지원하지 않습니다
[분석 설명] Firefox는 innerText를 지원하지 않습니다.innerText를 구현하기 위해 textContent를 지원합니다. 그러나 textContent는 innerText와 같은 요소의 표시 방법을 고려하지 않으므로 IE와 완전히 호환되지 않습니다. textContent를 사용하지 않는 경우 문자열에 HTML 코드가 없으면 innerHTML을 대신 사용할 수 있습니다. js를 사용하여 이를 구현하는 메서드를 작성할 수도 있습니다. "firefox에 대한 innerText 속성 구현" 문서를 참조할 수 있습니다.
[호환성 처리] 브라우저 유형을 결정하여 호환 가능:
document.getElementById('element').innerText = "내 텍스트";
} else{
document.getElementById('element').textContent = "내 텍스트"
}
4. 이벤트 처리
JavaScript를 사용할 때 이벤트 처리가 포함되는 경우 다양한 브라우저의 이벤트 차이를 알아야 합니다("한 번에 세 가지 이벤트 모델 지원" 참조). NN4, IE4 및 3가지 주요 JavaScript 이벤트 모델이 있습니다. W3C/사파르.
1. 윈도우.이벤트
[분석 지침] 먼저 코드를 살펴보겠습니다
{
경고(이벤트);//IE: [객체]
}
위 코드를 IE에서 실행한 결과는 [object]인데, Firefox에서는 실행할 수 없습니다.
IE에서는 이벤트를 윈도우 객체의 속성으로 직접 사용할 수 있지만, 파이어폭스에서는 매개변수를 전달해 이벤트를 전파하는 W3C 모델을 사용하기 때문에 이벤트 응답 인터페이스를 제공해야 한다.
[호환성 처리] 다양한 브라우저에 따라 올바른 이벤트를 가져오기 위한 이벤트 판단 추가:
{
evt =evt?evt:(window.event?window.event:null);
//IE 및 Firefox와 호환
alert(evt);
}
2. 키보드 값 얻기
[분석 설명] IE와 Firefox는 키보드 값을 얻는 방법이 다릅니다. Firefox의 event.which는 IE의 event.keyCode와 동일하다는 것을 알 수 있습니다. 차이점에 대해서는 "키보드 이벤트에서의 keyCode, which 및 charCode 호환성 테스트"를 참조하세요
【호환 처리】
function myKeyPress(evt){
//호환되는 IE 및 Firefox는 keyBoardEvent 객체를 얻습니다.
evt = (evt) ? evt : ((window.event) ? window.event : "")
//키 값을 얻기 위해 IE 및 Firefox와 호환됩니다. keyBoardEvent 객체
var key = evt.keyCode?evt.keyCode:evt.which
if(evt.ctrlKey && (key == 13 || key == 10)){
// Ctrl과 Enter를 동시에 누르기 키
//뭔가를 하세요;
}
}
3. 이벤트 소스 얻기
[분석 설명] 이벤트 위임을 사용하면 이벤트가 어떤 요소에서 오는지 확인하기 위해 이벤트 소스를 얻습니다. 그러나 IE에서는 이벤트 개체에 srcElement 속성이 있지만 Firefox에서는 대상 속성이 없습니다. 대상 속성이 있지만 srcElement 속성이 없습니다.
【호환 처리】
ele=function(evt){ // 현재 이벤트 캡처 작업 개체
evt=evt||window.event;
return
(obj=event.srcElement?event.srcElement:event.target;);
}
4. 이벤트 모니터링
【분석 설명】이벤트 수신 및 처리 측면에서 IE는 attachmentEvent 및 detachEvent라는 두 가지 인터페이스를 제공하는 반면 Firefox는 addEventListener 및 RemoveEventListener를 제공합니다.
[호환성 처리] 가장 간단한 호환성 처리는 다음 두 인터페이스 세트를 캡슐화하는 것입니다.
function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on" eventName, function(){
handler.call(elem)})
//콜백 함수 call() 여기에서 사용됩니다. elem
} else if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false)
}
}
function RemoveEvent(elem , eventName, handler) {
if (elem.detachEvent) {
elem.detachEvent("on" eventName, function(){
(), 이것을 elem을 가리키도록 하세요
} else if ( elem.removeEventListener) {
elem.removeEventListener(eventName, handler, false)
}
}
Firefox에서는 이벤트 핸들러 함수의 이것이 모니터링되는 요소 자체를 가리키지만 IE에서는 콜백 함수 호출을 사용하여 현재 컨텍스트가 모니터링되는 요소를 가리키도록 할 수 있다는 점에 유의하는 것이 중요합니다. 요소.
5. 마우스 위치
[분석 설명] IE에서는 짝수 개체에 x, y 속성이 있지만, Firefox에서는 짝수 개체에 pageX, pageY 속성이 있지만 x, y 속성은 없습니다.
【호환성 처리】 IE에서는 event.x를, Firefox에서는 event.pageX를 바꾸려면 mX(mX = event.x ? event.x : event.pageX;)를 사용하세요. 일을 더 복잡하게 만들려면 절대 위치도 고려해야 합니다
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x = e.offsetLeft
y = e.offsetTop; Alert(" x:" x "," "y:" y)
}
5. 기타 차이점의 호환성 처리
1. XMLHttp요청
【분석 설명】new ActiveXObject("Microsoft.XMLHTTP"); IE에서만 작동하며 Firefox는 지원하지 않지만 XMLHttpRequest를 지원합니다.
【호환 처리】
