크로스 브라우저 JavaScript 메소드_javascript 기술 개발 지침

IE는 현재 브라우저와는 다른 종류이지만 해결 방법은 매우 간단합니다. Firefox 및 Safari로 탐색할 때 요소의 setArribute 메소드를 사용하여 요소의 클래스 속성을 설정할 수 있습니다.

크로스 브라우저 JavaScript 개발

1. ff와 ie의 childNode 차이점.

ff의 노드(nodeType = 1)는 모두 textNode(nodeType = 3)로 구분되지만 ie/op에서는 그렇지 않습니다.

content

ff 아래 box1에는 3개의 childNode가 있고, 즉 1개 아래에 있습니다.

2. 노드 객체의 스타일 클래스 이름을 설정합니다.

즉, 특정 노드의 클래스를 설정하려면 속성으로 "className"을 사용하여 설정하거나 가져옵니다.

ff 및 기타 브라우저는 속성으로 "class"를 사용하여 설정하거나 가져옵니다.

코드:

if(typeof node1.getAttribute("className") == "string") {

.

}

3. 노드 객체의 스타일 내용을 설정합니다.



코드를 직접 예로 들어 보겠습니다.

var oStyle = oNode.getAttribute("style")

// 즉

if(oStyle == "[object]") {

oStyle.setAttribute("cssText", strStyle)

oNode.setAttribute("style", oStyle)

} else {

oNode.setAttribute("style", strStyle)

}

4.

즉, 이벤트 사용

ff evnt 사용

5. 이벤트 작업 개체

즉, objEvent.srcElement 사용

ff objEvent 사용. target

이것은 xml 파일 작성과 관련이 있습니다. IE의 PreserveWhiteSpace를 true로 설정하고 살펴보세요. 다음은 Microsoft 문서
에서 가져온 코드입니다.

var xmlDoc = new ActiveXObject( " Msxml2.DOMDocument.4.0");

xmlDoc.async = false;

xmlDoc.preserveWhiteSpace =

xmlDoc.load("books.xml");

alert(xmlDoc.xml);

xmlDoc.async = false;

xmlDoc.preserveWhiteSpace = false; xml ");

alert(xmlDoc.xml);

------------

1. 테이블에 행 추가:

document.createElement 및 document.appendChild 메서드를 사용하면 쉽게 테이블에 행을 추가하거나 처음부터 테이블 행이 포함된 새 테이블을 만들 수 있습니다. 테이블을 생성하고 document.appendChild 메소드를 사용하여 테이블 행에 테이블 셀을 추가한 다음 document.appendChild를 사용하여 테이블 행을 테이블에 추가합니다.

IE에서는 tr 요소를 테이블에 직접 추가하는 대신 tbody에 추가할 수 있습니다.





>
이 테이블에 행을 추가하는 올바른 방법은 다음과 같이 테이블 대신 테이블 본문에 행을 추가하는 것입니다.

var cell=document.createElement("td").appendChild ( document.createTextNode("foo");

var row = document.createElement("tr").appendChild(cell)

document.getElementById("mysqlTableBody").appendChild( 행 );

다행히 이 방법은 IE를 포함한 모든 최신 브라우저에서 공통적으로 사용되며, 항상 테이블 본문을 사용하는 습관을 들이면 이 문제에 대해 걱정할 필요가 없습니다. >2 Javascrīpt를 통해 요소의 스타일 설정

요소의 setAttribute 메소드를 사용하여 요소의 스타일을 설정할 수 있습니다. 예를 들어 표시할 범위 요소의 텍스트를 수정하려는 경우입니다. 빨간색 굵은 글씨로 다음과 같이 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: blod; color: red;";

이 방법은 IE 및 Opera를 제외한 대부분의 다른 브라우저에서 잘 작동합니다. 현재 모든 브라우저에서 코드를 이식 가능하게 하려면 두 가지 방법을 모두 사용하십시오. 이 방법은 setAttribute 방법과 아래와 같이 스타일 객체의 cssText 속성:

varspanElement = document.getElementById("mySpan")

spanElement.setAttribute ("style","font-weight:bold) ; 색상: 빨간색;");

spanElement.style.cssText = "font-weight:blod ; color:red;";

3

요소의 클래스 속성을 설정합니다. IE는 현재 브라우저와 다른 유형이지만 해결책은 매우 간단합니다. Firefox 및 Safari를 사용하여 탐색할 때 아래와 같이 요소의 setArribute 메소드를 사용하여 요소의 클래스 속성을 설정할 수 있습니다.

var element = document.getElementById( "myElement");element.setAttribute("class","styleClass");

이상한 점은 setAttribute 메서드를 사용하고 속성 이름을 IE로 지정하면 요소의 클래스 속성을 설정하지 않습니다. 반대로 IE는 setAttribute 메소드만 사용할 경우에만 className 속성을 인식합니다.

이 상황에 대한 완전한 해결책은 다음과 같습니다. 요소의 setAttribute 메소드를 사용할 때 아래와 같이 class와 className을 모두 속성 이름으로 사용합니다.

var element = document.getElementById ("myElement ");

element.setAttribute("class","styleClass");

element.setAttribute("className","styleClass");

현재 대부분의 브라우저는 클래스 속성 이름을 사용하고 className을 무시합니다. IE는 정반대입니다.

4 입력 요소 만들기

입력 요소는 사용자에게 페이지 상호 작용 수단을 제공합니다. HTML 자체에는 한 줄 텍스트 상자, 여러 줄 텍스트 상자 등 제한된 입력 요소 집합이 있습니다. 상자 선택, 상자, 버튼, 확인란 및 버튼을 선택합니다. Ajax 구현의 일부로 이러한 입력 요소를 동적으로 생성하기 위해 Javascript를 사용할 수 있습니다.

한 줄짜리 텍스트 상자, 버튼, 체크박스, 라디오 버튼은 모두 입력 요소로 생성할 수 있지만 type 속성의 값이 다릅니다. 선택 상자와 텍스트 영역에는 고유한 마크업이 있으며 몇 가지 간단한 규칙만 따르면 Javascript(라디오 버튼 제외)를 통해 입력 요소를 동적으로 쉽게 생성할 수 있습니다. 선택 상자와 텍스트 영역은 document.createElement 메소드를 사용하여 쉽게 생성할 수 있습니다. select 또는 textarea와 같은 요소의 태그 이름을 document.createElement에 전달하기만 하면 됩니다.

한 줄 텍스트 상자, 버튼, 체크박스, 라디오 버튼은 모두 동일한 요소 이름 입력을 갖고 있지만 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(buttion);

다음 항목 간단한 규칙은 나중에 발생할 수 있는 진단하기 어려운 문제를 제거하는 데 도움이 될 것입니다.

5. 입력 요소에 이벤트 핸들러 추가

입력 요소에 이벤트 핸들러를 추가하는 것은 setAttribute 메소드를 사용하고 이벤트 루틴의 이름과 이름을 지정하는 것만큼 쉽습니다. 필요한 함수 루틴의 ? 잘못된. 요소에 대한 이벤트 핸들러를 설정하는 표준 방법은 다음과 같이 이벤트 이름을 속성 이름으로, 함수 핸들러를 속성 값으로 사용하는 요소의 setAttribute 메소드를 사용하는 것입니다.

var formElement = document .getElementById( "formElement");

formElement.setAttribute("onclick","doFoo();");

IE를 제외하고 위 코드는 다음과 같은 경우 모든 현재 브라우저에서 작동합니다. Javascript를 사용하여 IE에서 이벤트 핸들러를 설정할 때 요소에 점 표기법을 사용하여 필수 이벤트 핸들러를 참조하고 이를 익명 함수에 할당해야 합니다. 이 익명 함수는 아래와 같이 필수 이벤트 핸들러를 호출합니다.
var formElement = documentgetElementById("formElement");

formElement.onclick = function(){ doFoo() }; 다행히도 이 기술은 IE 및 기타 모든 브라우저에서 채택되었습니다. 이를 지원하므로 Javascript를 통해 양식 요소에 대한 이벤트 핸들러를 동적으로 설정하는 것이 전적으로 가능합니다.

6 라디오 버튼 만들기

IE를 제외한 다른 모든 브라우저에서는 현재 라디오 버튼을 만드는 데 다음 방법을 사용할 수 있습니다(이러한 방법도 가능함).

var readioButtion = document.createElement("입력")

readioButtion.setAttribute("type","radio");

readioButtion.setAttribute("name","radioButtion")

readioButtion.setAttribute("value","checked") ;

이렇게 하면 IE를 제외한 모든 현재 브라우저에 라디오 버튼이 생성되고 제대로 작동합니다. IE에서는 라디오 버튼이 나타나지만 라디오 버튼을 클릭해도 예상대로 선택되지 않기 때문에 선택할 수 없습니다. IE에서 한 줄 버튼을 만드는 방법은 완전히 다르며 다른 브라우저에서 사용하는 방법과 전혀 호환되지 않습니다. 이전에 생성된 라디오 버튼의 경우 IE에서 다음과 같이 생성할 수 있습니다.

var radioButtion = document.createElement(" " );

이를 위해서는 일종의 브라우저 스니핑 메커니즘이 필요합니다. IE는 고유 ID, 고유 ID라는 문서 개체의 특수 속성을 인식할 수 있습니다. IE는 또한 이 속성을 인식하는 유일한 브라우저이므로 고유 ID는 스크립트가 IE에서 실행 중인지 확인하는 데 적합합니다.

document.uniqueID 속성을 사용하여 스크립트가 실행 중인 브라우저를 확인할 때 IE 관련 메서드와 표준 호환 메서드를 결합하면 다음 코드를 얻을 수 있습니다.

if(document .uniqueID){

//Internet Explorer

var radioButtion = document.createElement("
}

else{

//표준 준수

var readioButtion = document.createElement("input");

readioButtion.setAttribute("type","radio");

readioButtion.setAttribute("name","radioButtion")

readioButtion.setAttribute("value"," 확인됨") ;

}