크로스 브 라 우 저 자 바스 크 립 트 개발 흔 한 주의사항

1.표 에 추가 줄 을 추가 하 는 것 은 기 존의 Ajax 를 사용 한 경험 에서 자바 스 크 립 트 를 사용 하여 기 존의 표 에 줄 을 추가 하거나 표 줄 을 포함 하 는 새 표를 처음부터 만 들 수 있 습 니 다.document.createElement 와 document.appendChiid 방법 은 쉽게 할 수 있 습 니 다.document.createElement 를 사용 하여 표 셀 을 만 들 고 document.app-endChild 방법 으로 표 셀 을 표 줄 로 늘 립 니 다.다음 편집 절 차 는 document.append-Child 를 사용 하여 표 줄 을 표 에 추가 하 는 것 입 니 다.Firefox,Safari,Opera 등 현재 브 라 우 저 에서 이렇게 하면 됩 니 다.단,lE 를 사용 하면 표 줄 은 표 에 나타 나 지 않 습 니 다.더 나 쁜 것 은 IE 가 어떠한 오류 도 던 지지 않 거나 표 줄 이 표 에 추가 되 었 지만 나타 나 지 않 는 문제 에 대해 단 서 를 제공 하 는 것 이다.이런 상황 에서 해결 방법 은 매우 간단 하 다.IE 는 table 요소 가 아 닌 tr 요 소 를 tbody 요소 로 추가 할 수 있 습 니 다.예 를 들 어 빈 표를 다음 과 같이 정의 하면이 표 에 줄 을 추가 하 는 올 바른 방법 은 표 에 줄 을 추가 하 는 것 이지 표 에 추가 하 는 것 이 아 닙 니 다.다음 과 같 습 니 다.var cell=document.createElement("td").appendChild(document.createTextNode("foo").vat row=document.createElement("tr").appendChild(cell); document.getElementByld("myTableBody").appendChiid(row); 다행히 이 방법 은 현재 브 라 우 저 에서 도 사용 할 수 있 고 IE 도 포함 된다.만약 네가 습관 이 된다 면,항상 표 의 표 체 를 사용한다 면,이 문 제 를 걱정 할 필요 가 없다.둘째,자바 script 을 통 해 요 소 를 설정 하 는 스타일 은 Ajax 기술 을 이용 하여 개발 자가 만 든 웹 애플 리 케 이 션 은 서버 와 빈 틈 없 이 통신 할 수 있 으 며 전체 페이지 를 새로 고침 하지 않 아 도 됩 니 다.그러나 A1ax 요청 에 대해 서 는 이러한 페이지 가 반 짝 거리 지 않 기 때문에 사용자 들 은 페이지 의 일부 데이터 가 업데이트 되 었 다 는 것 을 모 를 수 있 습 니 다.일부 요소 의 스타일 을 수정 하고 싶 을 수도 있 습 니 다.페이지 의 일부 데이터 가 바 뀌 었 음 을 표시 합 니 다.예 를 들 어 주식 의 가격 이 Ajax 요청 을 통 해 틈새 없 는 업 데 이 트 를 받 았 다 면 이 주식 의 이름 을 밝 힐 수 있다.자 바스 크 립 트 를 통 해 요소 의 setAttribute 방법 으로 요소 의 스타일 을 설정 할 수 있 습 니 다.예 를 들 어 span 요소 의 텍스트 를 빨간색 굵 은 디 스 플레이 로 수정 하려 면 setAttribute 요법 을 사용 할 수 있 습 니 다.var spanElement=document.getElement ById("my Span");spanElement.setAttribute("style", "font-weight:bold; color:red;"); IE 를 제외 하고 이런 방법 은 현재 다른 브 라 우 저 에서 모두 통할 수 있다.IE 에 대해 해결 방법 은 요소 style 대상 의 cssText 속성 을 사용 하여 필요 한 스타일 을 설정 하 는 것 입 니 다.이 속성 은 표준 이 아니 지만 광범 위 한 지원 을 받 았 습 니 다.다음 과 같 습 니 다.var spanElement=document.getElement ById("my Span");spanElement.style.cssText = "font-weight:bold; color:red;"; 이 방법 은 IE 와 대부분의 다른 브 라 우 저 상부 에서 오페라 만 제외 하고 잘 작 동 할 수 있다.코드 를 현재 브 라 우 저 에서 이식 할 수 있 도록 이 두 가지 방법 을 동시에 사용 할 수 있 습 니 다.즉,setAttribute 방법 도 사용 하고 요소 style 대상 의 cssText 속성 도 사용 할 수 있 습 니 다.다음 과 같 습 니 다.var spanElement=document.getElement ById("my Span").spanElement.setAttribute("style", "font-weight:bold; color:red;"); spanElement.style.cssText = "font-weight:bold; color:red;"; 이렇게 되면 현재 모든 브 라 우 저 에서 요소 의 스타일 을 정상적으로 설정 할 수 있 습 니 다.3.요 소 를 설정 하 는 class 속성 은 앞의 절 을 읽 은 후에 자 바스 크 립 트 를 통 해 요소 의 내 연 스타일 을 설정 할 수 있다 는 것 을 알 게 되 었 습 니 다.당연히 요소 가 없 는 class 속성 을 간단하게 설정 하 는 것 이 가장 쉬 울 것 이 라 고 생각 할 수 있 습 니 다.안 타 깝 게 도 그렇지 않다.요소 내 연 스타일 을 설정 하 는 것 과 유사 하 며,자바 스 크 립 트 를 통 해 요소 의 class 속성 을 동적 으로 설정 할 때 도 특이 성 이 있 습 니 다.IE 는 현재 브 라 우 저 에서 다른 종류 라 는 것 을 이미 알 고 있 을 것 입 니 다.그러나 해결 방법 도 상당히 간단 합 니 다.Firefox 와 Safari 같은 브 라 우 저 를 사용 할 때 요소 의 setAttribute 방법 으로 불필요 한 class 속성 을 설정 할 수 있 습 니 다.다음 과 같 습 니 다.var element=document.getElement ById("my Element");element.setAttribute("class", "styleC1ass"); 이상 하 게 도 setAttribute 방법 을 사용 하고 속성 명 을 class 로 지정 하면 IE 는 요소 의 class 속성 을 설정 하지 않 습 니 다.반대로 setAttribute 방법 만 사용 할 때 IE 는 className 속성 을 스스로 식별 합 니 다.이러한 경우 완 비 된 해결 방법 은 요소 의 setAttribute 방법 을 사용 할 때 class 와 className 을 속성 명 으로 사용 하 는 것 입 니 다.다음 과 같 지 않 습 니 다.var element=document.getElement ById("my Element");element.setAttribute("class", "styleC1ass"); element.setAttribute("className", "styleC1ass"); 현재 대부분의 브 라 우 저 는 className 을 무시 하고 className 을 사용 합 니 다.IE 는 정반 대 입 니 다.4.입력 요소 의 입력 요 소 를 만들어 사용자 에 게 페이지 와 상호작용 하 는 수단 을 제공 합 니 다.HTML 자 체 는 한 줄 의 텍스트 상자,여러 줄 의 텍스트 상자,선택 상자,단추,체크 상자 와 체크 단 추 를 포함 하여 제 한 된 입력 요 소 를 가지 고 있 습 니 다.자바 Scfipt 을 사용 하여 이러한 입력 요 소 를 Ajax 가 실현 하 는 일부분 으로 동적 으로 파 헤 치고 싶 을 수도 있 습 니 다.단일 텍스트 상자,단추,체크 상자,체크 단 추 는 입력 요소 로 만 들 수 있 습 니 다.type 속성의 값 만 다 릅 니 다.선택 상자 와 텍스트 영역 에 자신 만 의 태그 가 있 습 니 다.JavaScript 를 통 해 입력 요 소 를 동적 으로 만 드 는 것 은 간단 합 니 다.document.createElement 방법 을 사용 하면 선택 상자 와 텍스트 영역 을 쉽게 만 들 수 있 습 니 다.document.cr eateElement 에 요소 의 태그 이름 만 전달 하면 됩 니 다.예 를 들 어 select 나 textarea.단일 텍스트 상자,단추,체크 상자,체크 단 추 는 조금 어렵 습 니 다.같은 요소 이름 input 이 있 기 때문에 type 속성의 값 만 다 릅 니 다.따라서 이 요 소 를 만 들 려 면 document.createElement 방법 뿐만 아니 라 요소 의 setAttribute 방법 으로 type 속성의 값 을 설정 해 야 합 니 다.이것 은 어렵 지 않 지만 코드 를 한 줄 더 추가 해 야 합 니 다.새로 만 든 입력 요 소 를 부모 요소 에 추가 하 는 지 고려 하려 면 document.createElement 과 setAttribute 문장의 순 서 를 주의해 야 합 니 다.일부 브 라 우 저 에 서 는 요 소 를 제거 하고 type 속성 을 정확하게 설정 할 때 새로 만 든 요 소 를 부모 요소 에 추가 합 니 다.예 를 들 어 다음 코드 세그먼트 에 일부 브 라 우 저 에 이상 한 행동 이 있 을 수 있 습 니 다.document.getElement ById("formElement").appendChild(button);button.setAttribute("type", "button"); 이상 한 행동 을 피하 기 위해 서 는 입력 요 소 를 제거 한 후 모든 속성,특히 type 속성 을 설정 한 다음 부모 요소 에 추가 해 야 합 니 다.다음 과 같 습 니 다.var button=document.createElement("input"):button.setAttribute("type","button");document.getElementById("formElement").appendChild(button); 이 간단 한 규칙 을 따 르 면 앞으로 발생 할 수 있 는 진단 하기 어 려 운 문 제 를 없 애 는 데 도움 이 된다.5 방향 입력 요소 증가 일 처리 프로그램 이 입력 요소 에 이벤트 처리 프로그램 을 추가 하 는 것 은 setAttribute 방법 을 사용 하고 이벤트 처리 프로그램의 이름과 필요 한 함수 처리 프로그램의 이름 을 지정 하 는 것 만큼 쉬 워 야 합 니 다.맞 습 니까?틀리다요 소 를 설정 하 는 이벤트 처리 프로그램의 표준 방법 은 요 소 를 사용 하 는 setAttribute 방법 입 니 다.이벤트 이름 을 속성 명 으로 하고 함수 처리 프로그램 을 속성 값 으로 합 니 다.다음 과 같 습 니 다.var formElement=document,getElement ById("formElement");formElement.setAttribute("onclick", "doFoo();"); IE 위의 코드 를 제외 하고 현재 브 라 우 저 에서 모두 작업 할 수 있 습 니 다.IE 에서 자바 Scfipt 에서 요 소 를 설정 하 는 이벤트 처리 프로그램 을 사용 하려 면 요소 에 대해 점 표기 법 을 사용 하여 필요 한 이벤트 처리 프로그램 을 참조 해 야 합 니 다.익명 함수 가 아 닌 이 익명 함 수 는 필요 한 일 처리 프로그램 을 호출 해 야 합 니 다.다음 과 같 습 니 다.var formElement=document,getElement ById("formElement");formElement.onclick = function() { doFoo(); }; 어떻게 점 표기 법 을 통 해 formElement 에서 onclick 이벤트 처리 프로그램 을 참조 하 는 지 주의 하 십시오.onclick 작업 처리 프로그램 은 익명 함수 로 부 여 됩 니 다.이 익명 함 수 는 필요 한 이벤트 처리 프로그램 만 호출 되 었 습 니 다.이 예 에서 이벤트 처리 프로그램 은 doFoo 입 니 다.다행히도 이 기술 은 IE 와 모든 현재 브 라 우 저의 지원 을 받 았 습 니 다.따라서 자바 Scfipt 을 통 해 폼 요 소 를 동적 으로 설정 할 수 있 는 이벤트 처리 프로그램 입 니 다.6.체크 단 추 를 만 드 는 것 이 가장 좋 은 것 은 항상 마지막 에 있 습 니 다.자 바스 크 립 트 를 통 해 단일 단 추 를 동적 으로 만 드 는 것 은 매우 힘 든 일이 다.왜냐하면 IE 에서 단일 단 추 를 만 드 는 방법 은 다른 브 라 우 저 에서 사용 하 는 방법 과 크게 다 르 기 때문이다.IE 를 제외 하고 현재 모든 브 라 우 저 는 다음 과 같은 방법 으로 체크 단 추 를 만 들 수 있 습 니 다(이 방법 들 은 원 하 는 것 같 습 니 다):var radio Button=document.createElement("input").radioButton.setAttribute("type", "radlo"); radioButton.setAttribute("name", "radioButton"); radioButton.setAttribute("value", "checked"); 이렇게 하면 IE 를 제외 한 모든 현재 브 라 우 저 에서 선택 단 추 를 만 들 수 있 고 정상적으로 작 동 할 수 있 습 니 다.lE 에 서 는 체크 단추 가 확실히 표 시 됩 니 다.그러나 선택 할 수 없습니다.체크 단 추 를 누 르 면 우리 가 예상 한 대로 선택 하지 않 기 때 문 입 니 다.IE 에서 선택 단 추 를 만 드 는 방법 은 다른 브 라 우 저 에서 사용 하 는 방법 과 완전히 다 르 고 호 환 되 지 않 습 니 다.앞에서 만 든 체크 버튼 은 IE 에서 다음 과 같이 만 들 수 있 습 니 다.var radio Button=decument.createElement(");다행히 IE 에 서 는 자바 스 크 립 트 를 통 해 단일 선택 단 추 를 동적 으로 만 들 수 있 습 니 다.어렵 고 다른 브 라 우 저 와 호 환 되 지 않 습 니 다.어떻게 이 제한 을 극복 합 니까?답 은 간단 합 니 다.이것 은 어떤 브 라 우 저 탐지(browser-snifing)메커니즘 이 필요 합 니 다.선택 단 추 를 만 들 때 스 크 립 트 가 어떤 방법 을 사용 해 야 하 는 지 알 수 있 습 니 다.다행히도,너 는 대량의 다른 브 라 우 저 를 검사 할 필요 가 없다.현대 브 라 우 저 만 사용한다 고 가정 하면 스 크 립 트 는 IE 와 다른 브 라 우 저 사이 에서 만 구분 하면 된다.IE 는 유 니 크 ID 로 유명한 document 대상 의 전용 속성 을 식별 할 수 있 으 며,이름 은 유 니 크 ID 입 니 다.IE 도 이 속성 을 식별 할 수 있 는 유일한 브 라 우 저 이기 때문에 유 니 크 ID 는 스 크 립 트 가 IE 에서 실행 되 는 지 확인 하 는 데 적합 합 니 다.docurnent.uniqueID 속성 을 사용 하여 스 크 립 트 가 어느 브 라 우 저 에서 실행 되 는 지 확인 할 때 IE 의 특정한 방법 과 표준 호 환 방법 을 결합 하면 다음 과 같은 코드 를 얻 을 수 있 습 니 다.if(document.uniqueID){/Internet Explorer var radio Button=decument.createElement("input type='radio'name='radio Button'value='checked');}else { //Standards Compliant var radioButton = document.createElement("input"); radioButton.setAttribute("type", "radlo"); radioButton.setAttribute("name", "radioButton"); radioButton.setAttribute("value", "checked"); }