프런트엔드 브라우저 JavaScript 및 CSS 호환성 요약

프론트엔드 브라우저의 JavaScript 및 CSS 호환성 요약

1. getElementById

[표준 참조]

getElementById는 Document 인터페이스에서 제공 이 메소드에 의해 전달된 매개변수는 대상 요소의 id 속성 값이어야 하며, id는 대소문자를 구분합니다. 문서 내에서 고유해야 합니다.

[문제 설명]

그러나 IE6 IE7 IE8(Q)에서는 document.getElementById(elementName)에 의해 name 속성 값이 elementName인 APPLET BUTTON FORM IFRAME IMG INPUT을 얻는 것이 지원됩니다. MAP META OBJECT EMBED SELECT TEXTAREA 요소이며 ID는 대소문자를 구분하지 않습니다.

【영향】

이 문제로 인해 IE 이외의 브라우저에서는 대상 요소를 얻을 수 없게 됩니다.

[해결책]

document.getElementById 메소드를 사용하여 페이지 요소를 가져올 때 해당 요소의 name 속성 값 대신 해당 요소의 id 속성 값을 전달해야 하며, 대소문자를 엄격하게 구분합니다. 동시에, 페이지에 있는 요소의 id 속성 값은 다른 요소의 name 속성 값과 중복될 수 없다는 점에 유의하세요.

게다가 getElementById와 마찬가지로 표준 getElementsByName도 대소문자를 구분하지만 IE에서는 대소문자를 구분하지 않으므로 사용할 때 대소문자를 엄격하게 구분하는 것이 가장 좋습니다.

2. IE는 DOM 트리 생성 시 특정 공백 문자를 무시합니다

[표준 참조]

노드(node)에는 요소 노드뿐만 아니라 텍스트 노드, Annotation도 포함됩니다. 노드, 속성 노드 등, nodeType을 사용하여 노드 유형을 구별할 수 있습니다.

HTML 소스 코드에서 태그 내부 및 태그 사이의 텍스트(공백 문자 포함)는 텍스트 노드로 생성됩니다.

[문제 설명]

DOM 트리를 생성할 때 IE는 일부 공백 문자를 무시하므로 다른 브라우저보다 적은 수의 텍스트 노드를 생성합니다. 반면, 동일한 문서에 대해 다른 브라우저는 IE보다 더 많은 텍스트 노드를 생성합니다.

【영향】

노드 객체의 nodeList, firstChild, lastChild, PreviousSibling 또는 nextSibling 메소드를 사용하는 IE용 스크립트는 이 문제로 인해 다른 브라우저에서 작동하지 않을 수 있습니다. 스크립트 실행 오류나 잘못된 대상 개체에 대한 작업과 같은 동일한 목적을 달성합니다.

[해결책]

1. 불필요한 경우 태그 사이의 공백을 제거해 보세요.

페이지 스크립트는 대부분 "요소 노드"에서 작동하기 때문에 요소 사이에 텍스트 노드가 없는지 확인하면 됩니다. 즉, 소스 코드의 태그 사이에 공백, 줄을 포함하여 공백 문자가 없는지 확인하면 됩니다. 나누기, 탭) 위의 속성이 브라우저 전체에서 일관되게 작동하도록 합니다.

또한 스크립트를 사용하여 생성되고 순차적으로 추가되는 요소는 서로 밀접하게 관련되어 있으므로 요소 사이에 텍스트 노드가 없으므로 이 경우 위의 호환성 문제에 대해 걱정할 필요가 없습니다.

2. 노드 획득 시 유형을 판단합니다.

요소 사이에 텍스트 노드가 없다는 보장이 없는 경우 노드 작업에 유형 판단을 추가해야 합니다.

또한 IE가 아닌 경우 PreviousElementSibling 및 nextElementSibling을 사용하여 요소 노드를 가져올 수도 있습니다. 예를 들어 Element.nextElementSibling을 사용하면 요소 Element에 인접한 다음 요소 노드를 가져올 수 있습니다.

3. document, document.body, document.documentElement 객체의 onscroll 이벤트 차이점

[표준 참조]

스크롤 이벤트는 문서 또는 요소가 스크롤됩니다.

[문제 설명]

브라우저에 따라 document, document.body, document.documentElement 객체의 onscroll 이벤트 지원에 차이가 있습니다.

모든 브라우저는 window 및 document를 지원합니다. Normal DIV 객체의 스크롤 이벤트입니다.

IE와 Opera에서는 document와 document.body 객체가 스크롤 이벤트를 지원합니다. 다른 브라우저에서는 지원되지 않습니다.

IE에서는 document.documentElement 개체가 스크롤 이벤트를 지원합니다. 다른 브라우저에서는 지원되지 않습니다.

【영향】

onscroll 이벤트를 document, document.body, document.documentElement 개체에 바인딩한 후 해당 이벤트 핸들러가 다른 브라우저에서 예상대로 실행되지 않을 수 있습니다.

[해결책]

스크롤 이벤트(스크롤)를 전체 브라우저 창에 바인딩할 때 창 개체에 바인딩합니다.

4. IE의 createElement 메소드만

[표준 참조]

W3C DOM Level2 Core 사양의 설명에 따라 HTML 문자열을 매개변수로 전달하는 것을 지원합니다. Document 인터페이스 createElement 메소드는 요소 노드 객체 인스턴스를 생성합니다. 문자열 매개변수 tagName을 전달할 수 있습니다. HTML에서 이 매개변수는 어떤 형식이든 가능하며 DOM에서 구현할 수 있는 호환 대문자 형식으로 매핑되어야 합니다. 즉, tagName은 유효한 태그 이름이어야 합니다. tagName에 잘못된 문자가 나타나면 INVALID_CHARACTER_ERR 예외가 발생해야 합니다.

[문제 설명]

IE6 IE7 IE8에서 createElement 메소드는 합법적인 태그 이름을 통해 노드 객체를 생성할 수 있을 뿐만 아니라 합법적인 HTML 코드 문자열을 매개변수로 전달하여 노드 객체를 생성할 수도 있습니다. 노드 객체.

【원인 영향】

적법한 HTML 코드 문자열을 createElement에 매개변수로 전달하여 노드 객체를 생성하는 IE 고유의 방법을 사용하는 경우 다른 브라우저에서 예외가 발생하고 후속 코드가 실행되지 않습니다.

[해결책]

일반적인 대체 불가능한 요소의 경우 W3C 사양에 따라 각 브라우저의 createElement 메소드에 태그 이름을 전달하는 표준 방법을 사용합니다.

교체된 요소와 관련된 일부 IE 처리 문제의 경우 브라우저에 주의하세요. IE의 경우 IE가 아닌 브라우저에서는 유효한 HTML 코드 문자열을 매개변수로 전달하는 고유한 방법을 사용하세요. W3C 사양 예:

호환되지 않는 코드, IE에서만 지원됨:

Var iframe = document.createElement('