js 의 호환성 이 틀 리 기 쉬 운 문 제 를 정리 하 다.

1.속성 관련
우 리 는 일반적으로 특징(attribute)과 속성(property)을 속성 이 라 고 통칭 하지만,그들 은 확실히 다른 개념 이다.
특징(attribute)은 HTML 텍스트 에 나타 나 고 특징 에 대한 수정 은 반드시 요소 의 outerHTML 에 나타 나 며 특징 은 요소 노드 에 만 존재 합 니 다.
속성(property)은 JS 대상 을 수정 하 는 것 으로 브 라 우 저 에 내 장 된 일부 특징 을 제외 하고 다른 속성 작업 은 HTML 텍스트 에 영향 을 주지 않 습 니 다.
1.IE6/7 속성 과 특징 을 구분 하지 않 음
다른 브 라 우 저 는 속성 과 특징 을 구분 하지만 IE 67 은 구분 하지 않 습 니 다.IE 67 에 서 는 속성 명 으로 만 특징 을 삭제 할 수 있 습 니 다.이 두 이름 은 같은 경우 가 많 지만 다른 점 이 있 습 니 다.
2.IE6/7 은 getAttribute/setAttribute 를 통 해 문자열 의 특징 이 아 닌 값 을 조작 할 수 없습니다.
현대 브 라 우 저 에서 getAttribute 는 HTML 에 대응 하 는 문자열 을 되 돌려 줍 니 다.IE 67 이 되 돌아 오 는 결 과 는 예측 할 수 없 기 때문에 IE 67 에 서 는 AttributeNode 로 속성 을 조작 해 야 합 니 다.
3.IE6/7/8 은 style 속성 을 통 해 CSS 텍스트 를 가 져 올 수 없습니다.
이 문 제 는 IE6/7 이 속성 과 특징 을 구분 하지 않 는 후유증 이 어야 합 니 다.style 이라는 속성 을 가 져 올 때 elem.style.csText 를 사용 하면 됩 니 다.
4.IE6/7 은 상대 URL 을 절대 URL 로 해석
이 문 제 는 IE6/7 에서 비어 있 는 src 속성 에 중복 요청 이 발생 할 수 있 으 며,getAttribute(href/src,4)를 사용 할 수 있 습 니 다.
5.요소 특징의 기본 행동 이 다 름
이러한 종류의 BUG 는 비교적 많 을 것 이다.예 를 들 어 일부 오래된 webkit 브 라 우 저 에서 checkbox/radio 의 기본 값 은 on 이 아니 라''이다.일부 오래된 웹 키 트 브 라 우 저 select 의 첫 번 째 요 소 는 선택 되 지 않 습 니 다.
스타일 조작
일반적인 상황 에서 스타일 은 줄 내 스타일 을 가 져 오고 설정 하 며 요 소 를 가 져 오 는 계 산 된 스타일 을 포함 합 니 다.
1.IE 는 background-position-x/y 를 지원 하지만 다른 브 라 우 저 는 지원 하지 않 습 니 다.
background-position-x/y 는 그림 의 위 치 를 편리 하 게 그 라 데 이 션 할 수 있 습 니 다.지원 되 지 않 는 상황 에서 background-position 속성 을 분석 하 는 것 을 고려 할 수 있 습 니 다.
2.IE6/7 은 opacity 속성 을 지원 하지 않 습 니 다.
알파 필 터 를 통 해 같은 효 과 를 낼 수 있 지만 요 소 를 촉발 하 는 haslayot 를 기억 하 세 요.
3.IE6/7/8 클 라 이언 트 가 만 든 노드 에 속성 을 잘못 계승 할 수 있 습 니 다.
예 를 들 어 background 는 두 개 를 수정 하면 동시에 고 칩 니 다.
4.서로 다른 가 져 오기 스타일 을 계산 하 는 방법
IE6/7/8 은 elem.currentStyle 을 사용 하고 다른 브 라 우 저 는 window.getComputed Style 함 수 를 사용 합 니 다.
5.서로 다른 픽 셀 화 방식
픽 셀 화 란 단위 가 픽 셀 이 아 닌 거 리 를 픽 셀 로 변환 해 계산 하기 편리 하 게 하 는 것 을 말한다.엄 밀 히 말 하면 이것 은 호환성 문제 가 아니 지만 모두 사용 할 수 있다.IE6/7/8 에 서 는 elem.runtime Style 과 pixel Left 를 결합 하여 처리 할 수 있 습 니 다.
현대 브 라 우 저 는 width 속성 으로 처리 할 수 있 습 니 다.
6.CSS 를 가 져 올 때의 버그 행동
Webkti 핵심 브 라 우 저 에 서 는 margin-right 가 자주 실 수 를 합 니 다.
3.조회 조작
조 회 는 일부 특징 문자열 을 통 해 요 소 를 찾 거나 요소 가 문자열 을 만족 시 키 는 지 판단 하 는 것 을 말한다.
1.IE6/7 은 id 와 name 을 구분 하지 않 습 니 다.
IE6/7 에서 getElement ById 와 getElementsByName 을 사용 할 때 id 나 name 이 주어진 값 과 같은 요 소 를 동시에 되 돌려 줍 니 다.name 은 보통 백 엔 드 에서 약속 하기 때문에 JS 를 쓸 때 id 가 name 과 중복 되 지 않도록 해 야 합 니 다.
2.IE6/7 은 getElements ByClassName 과 query Selector All 을 지원 하지 않 습 니 다.
이 두 함 수 는 IE8 부터 지원 되 기 때문에 IE6/7 에서 우리 가 실제로 사용 할 수 있 는 것 은 getElement ByTagName 뿐 입 니 다.
3.IE6/7 getElementsByTagName('*')을 지원 하지 않 으 면 비원 소 노드 를 되 돌려 줍 니 다
*를 사용 하지 않 거나 함 수 를 써 서 걸 러 냅 니 다.
4.IE8 에서 query Selector All 은 속성 선택 기 에 우호 적 이지 않 습 니 다.
거의 모든 브 라 우 저 에서 미리 정 의 된 속성 에 문제 가 있 습 니 다.사용자 정의 속성 을 사용 하거나 속성 선택 기 를 사용 하지 않 습 니 다.
5.IE8 에서 query Selector All 은 위 류 를 지원 하지 않 습 니 다.
가끔 은 위 류 가 좋 습 니 다.IE8 은 지원 하지 않 습 니 다.jquery 가 제공 하 는:first,last,:even,odd,:eq,:nth,lt,lt 는 위 류 가 아 닙 니 다.우 리 는 그 어떠한 시간 에 도 사용 하지 않 습 니 다.
6.IE9 의 matches 함 수 는 DOM 트 리 에 없 는 요 소 를 처리 할 수 없습니다.
원소 가 dom 트 리 에 없 으 면 반드시 false 로 돌아 갈 것 입 니 다.정 작 원 소 를 body 에 버 리 고 일치 한 다음 에 삭제 할 수 없습니다.물론 우 리 는 스스로 일치 함 수 를 써 서 회 류 를 피 할 수 있 습 니 다.
이벤트 조작
보통 JS 의 호환성 을 물 어보 면 첫 번 째 반응 은 attachEvent 와 addEventListener 이지 만 이 두 함수 의 차이 에 대해 서도 세부 적 인 부분 이 많 습 니 다.
1.사건 의 역할 대상 이 다르다
addEventListener 는 이벤트 의 현재 대상 이 고 attachEvent 는 window 입 니 다.
이벤트 매개 변수 대상 이 다 름
반드시 주의해 야 합 니 다.attachEvent 바 인 딩 함 수 는 인자 e 가 있 습 니 다.e=e||이 벤트 를 쓰 지 마 십시오.그러나 이들 의 매개 변수 속성 은 많은 차이 가 있 습 니 다.예 를 들 어 button 이나 witch,pageY 를 지원 하지 않 습 니 다.
2.극악무도 한 롤러 사건
롤러 이벤트 의 지원 은 엉망진창 이 라 고 할 수 있 습 니 다.규칙 은 다음 과 같 습 니 다.
IE6-11 chrome mousewheel wheel Detla 하-120 상 120
Firefox DOMMouse Scroll detail 아래 3 위-3
Firefox wheel detlaY 아래 3 위-3
IE9-11 wheel deltay 아래 40 위-40
chrome wheel deltay 아래 100 위-100
3.3 대 불 거품 사건
모든 브 라 우 저의 focus/blur 이벤트 가 거품 을 일 으 키 지 않 습 니 다.다행히도 대부분의 브 라 우 저 는 focusin/focusout 이 벤트 를 지원 하지만 얄 미 운 Firefox 는 이것 도 지원 하지 않 습 니 다.
IE 678 에서 submit 사건 은 거품 이 일어나 지 않 습 니 다.
IE 678 에서 change 사건 은 blur 때 까지 기 다 려 야 촉발 된다.
그러나 우 리 는 이 세 가지 문 제 를 해결 할 효과 적 인 수단 이 없고 모 의 트리거 방식 으로 만 처리 할 수 있다.
4. a.click()
이 방법 은 많은 브 라 우 저 에서 안전 하지 않 습 니 다.기본 행동 을 막 더 라 도 페이지 가 이동 할 수 있 습 니 다.
5.노드 조작
노드 작업 은 보통 노드 를 복사 하거나 생 성하 거나 노드 를 이동 하 는 위 치 를 말한다.
1.. innerHTML
IE6/7/8 innerHTML 을 사용 할 때 앞 에 텍스트 노드 가 있어 야 합 니 다.그렇지 않 으 면 많은 탭 을 잃 어 버 릴 수 있 습 니 다.또한 innerHTML 을 사용 하면 defaultValue 속성 에 오류 가 발생 할 수 있 습 니 다.
2.쓸모없는 tbody
IE6/7/8 은 빈 table 에 빈 tbody 를 자동 으로 추가 합 니 다.
3.cloneNode 에 서 는 attachEvent 이 벤트 를 복사 합 니 다.
그리고 우리 가 연 결 된 사건 을 기록 하지 않 으 면 우 리 는 그들 을 풀 방법 이 없다.
이상 의 정리 js 중의 일부 호환성 이 틀 리 기 쉬 운 문 제 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 여러분 들 이 우 리 를 많이 지지 해 주시 기 바 랍 니 다.