크로스 브라우저 JavaScript_javascript 팁 개발 시 일반적인 고려 사항

1. 테이블에 행 추가
과거 Ajax 사용 경험에서는 JavaScript를 사용하여 기존 테이블에 행을 추가하거나 처음부터 테이블 행이 포함된 새 테이블을 생성했을 것입니다. document.createElement 및 document.appendChiid 메서드를 사용하면 이 작업이 쉬워집니다. document.createElement를 사용하여 테이블 셀을 만든 다음 document.app-endChild 메서드를 사용하여 이러한 테이블 셀을 테이블 행에 추가하면 됩니다. 다음 편집 단계는 document.append-
Child를 사용하여 테이블에 테이블 행을 추가하는 것입니다.
Firefox, Safari, Opera 등 현재 브라우저에서 가능합니다. 그러나 lE를 사용하는 경우 테이블 행은 테이블에 표시되지 않습니다. 설상가상으로 IE는 오류를 발생시키지도 않고 테이블 행이 실제로 테이블에 추가되었지만 표시되지 않는 이유에 대한 단서를 제공하지도 않습니다.
이 경우 해결 방법은 간단합니다. IE에서는 tr 요소를 table 요소에 직접 추가하는 대신 tbody 요소에 추가할 수 있습니다. 예를 들어, 다음과 같이 빈 테이블을 정의하는 경우:



이 테이블에 행을 추가하는 올바른 방법은 아래와 같이 테이블이 아닌 테이블 본문에 행을 추가하는 것입니다.
var cell=document.createElement("td").appendChild(document.createTextNode ("foo"));
vat row=document.createElement("tr").appendChild(cell);
document.getElementByld("myTableBody").appendChiid(row)
감사합니다. , 이 방법은 IE를 포함한 모든 현재 브라우저에서 작동합니다. 항상 테이블 본체를 테이블에 놓고 사용하는 습관을 들이신다면 이런 문제는 걱정하지 않으셔도 됩니다.
2 javascript를 통한 스타일링 요소
Ajax 기술을 사용하면 개발자가 만든 웹 애플리케이션은 페이지를 완전히 새로 고치지 않고도 서버와 원활하게 통신할 수 있습니다. 하지만 A1ax 요청의 경우 이런 페이지 깜박임이 발생하지 않으므로 사용자는 페이지의 일부 데이터가 업데이트되었음을 ​​알지 못할 수 있습니다. 페이지의 일부 데이터가 변경되었음을 나타내기 위해 특정 요소의 스타일을 수정하고 싶을 수도 있습니다. 예를 들어 Ajax 요청을 통해 주식 가격이 원활하게 업데이트된 경우 주식 이름을 강조 표시할 수 있습니다.
요소의 setAttribute 메소드를 사용하여 JavaScript를 통해 요소의 스타일을 지정할 수 있습니다. 예를 들어, 빨간색과 굵게 표시되도록 범위 요소의 텍스트를 수정하려고 합니다. 다음과 같이 setAttribute 치료법을 사용할 수 있습니다.
varspanElement = document.getElementById("mySpan")
spanElement.setAttribute("style", "font-weight:bold; color:red;"); > IE를 제외하고 이 방법은 현재 다른 브라우저에서 가능합니다. IE의 경우 해결책은 요소 스타일 객체의 cssText 속성을 사용하여 원하는 스타일을 설정하는 것입니다. 이 속성은 표준은 아니지만 아래와 같이 널리 지원됩니다.
varspanElement = document.getElementById("mySpan")
spanElement.style.cssText = "font-weight:bold; color: red ;";
이 방법은 IE와 Opera를 제외한 대부분의 다른 브라우저에서 잘 작동합니다. 현재 모든 브라우저에서 코드를 이식할 수 있도록 하려면 두 메서드를 동시에 사용할 수 있습니다. 즉, 다음과 같이 setAttribute 메서드와 요소 스타일 객체의 cssText 속성을 모두 사용할 수 있습니다.
varspanElement = document.getElementById ("mySpan");
spanElement.setAttribute("style", "font-weight:bold; color:red;")
spanElement.style.cssText = "font-weight:bold; color:red ;";
이러한 방식으로 현재 모든 브라우저에서 요소의 스타일을 정상적으로 지정할 수 있습니다.

3. 요소의 클래스 속성 설정 이전 섹션을 읽은 후 JavaScript를 통해 요소의 인라인 스타일을 설정할 수 있다는 것을 당연하게 여길 수도 있습니다. 요소 없이 요소 설정하기 클래스 속성이 가장 쉬워야 합니다. 안타깝게도 그렇지 않습니다. 요소의 인라인 스타일을 설정하는 것과 유사하게 JavaScript를 통해 요소의 클래스 속성을 동적으로 설정할 때 몇 가지 특수성이 있습니다.
짐작하셨겠지만 IE는 현재 브라우저 중에서는 예외적이지만 해결 방법은 매우 간단합니다. Firefox 및 Safari와 같은 브라우저를 사용하는 경우 요소의 setAttribute 메소드를 사용하여 다음과 같이 중복 요소의 클래스 속성을 설정할 수 있습니다.
var element = document.getElementById("myElement")
element .setAttribute ("class", "styleC1ass");
이상한 점은 setAttribute 메소드를 사용하고 속성 이름을 class로 지정하면 IE가 요소의 클래스 속성을 설정하지 않는다는 것입니다. 반대로 IE는 setAttribute 메소드만 사용할 경우에만 className 속성을 인식합니다. 이 상황에 대한 완전한 해결책은 요소의 setAttribute 메소드를 사용할 때 다음과 같이 class와 className을 모두 속성 이름으로 사용하는 것입니다.
var element = document.getElementById("myElement")
요소. setAttribute("class", "styleC1ass");
element.setAttribute("className", "styleC1ass");
현재 대부분의 브라우저는 클래스 속성 이름을 사용하고 IE는 그 반대입니다. .

4. 입력 요소 생성 입력 요소는 사용자에게 페이지와 상호작용할 수 있는 수단을 제공합니다. HTML 자체에는 한 줄 텍스트 상자, 여러 줄 텍스트 상자, 선택 상자, 버튼, 체크 상자 및 라디오 버튼을 포함하여 제한된 입력 요소 세트가 있습니다. JavaScript를 사용하여 Ajax 구현의 일부로 이러한 입력 요소를 동적으로 구성할 수 있습니다.
한 줄짜리 텍스트 상자, 버튼, 체크박스, 라디오 버튼 모두 입력 요소로 생성할 수 있지만 type 속성의 값이 다릅니다. 선택 상자와 텍스트 영역에는 고유한 마크업이 있습니다. 몇 가지 간단한 규칙을 따르는 한 JavaScript를 통해 입력 요소를 동적으로 생성하는 것은 쉽습니다("라디오 버튼 만들기" 섹션에서 설명하는 라디오 버튼 제외). 선택 상자와 텍스트 영역은 document.createElement 메소드를 사용하여 select 또는 textarea와 같은 요소의 태그 이름을 document.cr
eateElement에 전달하기만 하면 쉽게 생성할 수 있습니다.
한 줄 텍스트 상자, 버튼, 체크박스, 라디오 버튼은 모두 동일한 요소 이름 입력을 갖고 있지만 type 속성의 값이 다르기 때문에 조금 더 어렵습니다. 따라서 이러한 요소를 생성하려면 document.createElement 메서드를 사용해야 할 뿐만 아니라 나중에 해당 요소의 setAttribute 메서드를 호출하여 type 속성의 값을 설정해야 합니다. 이는 어렵지 않지만 추가 코드 줄이 필요합니다.
새로 생성된 입력 요소를 상위 요소에 추가할 위치를 고려할 때 document.createElement 및 setAttribute 문의 순서에 주의해야 합니다.일부 브라우저에서는 새로 생성된 요소가 해당 요소가 생성되고 type 속성이 올바르게 설정된 경우에만 상위 요소에 추가됩니다. 예를 들어, 다음 코드 조각은 일부 브라우저에서 이상하게 작동할 수 있습니다.
document.getElementById("formElement").appendChild(button);
button.setAttribute("type", "button"); 이상한 동작을 방지하려면 입력 요소를 생성한 후 해당 요소의 모든 속성, 특히 유형 속성을 설정하고 다음과 같이 상위 요소에 추가해야 합니다.
var 버튼 = document.createElement("input ") :
button.setAttribute("type", "button");
document.getElementById("formElement").appendChild(button)
향후 문제를 해결하는 데 도움이 되는 간단한 규칙을 따르세요. 진단하기 어려운 경우가 발생할 수 있습니다.

5방향 입력 요소에 이벤트 핸들러 추가
입력 요소에 이벤트 핸들러를 추가하는 것은 setAttribute 메소드를 사용하고 이벤트 핸들러의 이름과 이벤트의 이름을 지정하는 것만큼 쉬워야 합니다. 원하는 함수 핸들러가 맞나요? 요소에 대한 이벤트 핸들러를 설정하는 표준 방법은 이벤트 이름을 속성 이름으로 사용하고 함수 핸들러를 속성 값으로 사용하는 요소의 setAttribute 메소드를 사용하는 것입니다. 아래와 같이: var formElement = document,getElementById("formElement");
formElement.setAttribute("onclick", "doFoo();")
위 코드는 IE를 제외하고 작동합니다. 현재의 모든 브라우저 모든 장치에서 작동할 수 있습니다. JavaScript를 사용하여 IE에서 요소의 이벤트 핸들러를 설정하는 경우 익명 함수에 할당하는 대신 요소에 점 표기법을 사용하여 필수 이벤트 핸들러를 참조해야 합니다. 아래와 같이:
var formElement = document,getElementById("formElement");
formElement.onclick = function() { doFoo() };
점 표기법 onclick 이벤트를 통해 참조하는 방법에 유의하세요. 매니저. onclick 이벤트 핸들러는 익명 함수에 할당되며 이 익명 함수는 필요한 이벤트 핸들러만 호출합니다. 이 경우 이벤트 핸들러는 doFoo입니다.
다행히 이 기술은 IE와 기타 모든 최신 브라우저에서 지원됩니다. 따라서 JavaScript를 통해 양식 요소의 이벤트 핸들러를 동적으로 설정하는 것이 완전히 가능합니다.

6. 라디오 버튼 만들기 항상 가장 좋은 것을 마지막에 남겨두세요. JavaScript를 통해 라디오 버튼을 동적으로 생성하는 것은 IE에서 라디오 버튼을 생성하는 방법이 다른 브라우저에서 사용하는 방법과 매우 다르기 때문에 번거롭습니다.
IE를 제외한 다른 모든 브라우저에서는 현재 다음 방법을 사용하여 라디오 버튼을 생성할 수 있습니다.
var radioButton = document.createElement("input")
radioButton.setAttribute( "type", "radlo");
radioButton.setAttribute("name", "radioButton")
radioButton.setAttribute("value", "checked")
추가로 사용할 수 있습니다. IE 라디오 버튼은 을 제외한 모든 현재 브라우저에서 생성되며 정상적으로 작동합니다. IE에서는 라디오 버튼이 표시됩니다. 하지만 라디오 버튼 행을 클릭해도 예상대로 선택되지 않기 때문에 선택할 수 없습니다. IE에서는 라디오 버튼을 생성하는 방법이 완전히 다르며 다른 브라우저에서 사용하는 방법과 전혀 호환되지 않습니다. 이전에 생성된 라디오 버튼의 경우 IE에서 다음과 같이 생성할 수 있습니다.
var radioButton = decument.createElement("name='radioButton' value='checked'>") ; 다행히 IE에서는 JavaScript를 통해 라디오 버튼을 동적으로 생성하는 것이 실제로 가능하지만 이는 더 어렵고 다른 브라우저와 호환되지 않습니다.
이 제한을 극복하는 방법은 간단합니다. 스크립트가 라디오 버튼을 생성할 때 사용할 방법을 알 수 있도록 일종의 브라우저 스니핑 메커니즘이 필요합니다. 다행히도 수많은 다른 브라우저를 확인할 필요가 없습니다. 최신 브라우저만 사용한다고 가정하면 스크립트는 IE와 다른 브라우저만 구별하면 됩니다.
IE는 UniqueID라는 이름의 문서 개체의 특수 속성을 인식할 수 있습니다. IE는 또한 이 속성을 인식하는 유일한 브라우저이므로 고유 ID는 스크립트가 IE에서 실행 중인지 확인하는 데 매우 적합합니다.
docurnent.uniqueID 속성을 사용하여 스크립트가 실행 중인 브라우저를 확인할 때 IE 관련 메서드를 표준 호환 메서드와 결합하면 다음 코드가 생성됩니다.
if(document.uniqueID) {
//Internet Explorer
var radioButton = decument.createElement("name='radioButton' value='checked'>") }
else {
//표준 준수
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radlo")
radioButton.setAttribute("name", "radioButton" ");
radioButton.setAttribute("value", "checked");
}