JavaScript_javascript 기술의 DOM에 대한 자세한 설명

원활한 성능 저하, 이전 버전과의 호환성 및 표시 분리라는 아이디어를 달성하기 위해 js 코드를 작성할 때마다 가장 먼저 하는 일은 필요한 테스트 및 검사 작업이어야 합니다.
먼저 확인을 위해 js 파일에 다음 코드를 추가합니다.

window.onload = function(){
if(!document.getElementsByTagName)  return false;
if(!document.getElementById) return false;
if(!document.getElementsByClassName)  return false;
if(!document.getElementById("selector"))  return false;
if(!document.getElementsByTagName("tag"))  return false;
if(!document.getElementsByClassName("selector"))  return false;
};

범용 래퍼 기능:

var $ = function(id){
   return document.getElementBy Id (id);
}
var addEvent = function(obj,event,fn){  //obj：元素对象名字，event：绑定事件，fn：触发的回调函数
   if(obj.addEventListener){
obj.addEventListener(event,fn,false);
   }
   else if(obj.attachEvent){
obj.attachEvent("on"+event,fn);
   }
}

페이지 로딩 및 실행이 필요한 많은 기능의 경우 window.onload 캡슐화 방법은 다음과 같습니다.

function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function")
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

Firefox와 IE의 JavaScript 차이점:

1. 대부분의 경우 이벤트 핸들러 함수에 대해 false를 반환하면 기본 이벤트 동작을 방지할 수 있습니다. 예를 들어 기본적으로 요소를 클릭하면 해당 요소의 href 속성에 지정된 페이지로 이동합니다.
return false는 종결자와 동일하며, return true는 실행자와 동일합니다.
JS의 세 가지 반환 사용 시나리오를 요약하면 다음과 같습니다.
retrun true; 올바른 처리 결과를 반환합니다.
false를 반환하고, 처리를 종료하며, 기본 작업이 실행되지 않도록 합니다.
return; 제어권을 페이지로 되돌립니다.

2. 대부분의 경우 변수에 함수 호출을 할당하는 것이 좋습니다.

3. noscript 태그는 스크립트 태그를 인식할 수 있지만 해당 스크립트를 지원할 수 없는 브라우저에서 사용할 수 있습니다. 브라우저가 스크립팅을 지원하는 경우 noscript 태그에 텍스트가 표시되지 않습니다.

4. 스타일을 동적으로 설정할 때는 가능하면 CSS를 사용하는 것이 가장 좋습니다. 가장 간단한 방법은 구현하기 쉬운 방법을 선택하는 것입니다.

5. 함수에서는 전역 변수에 액세스하는 것보다 지역 변수에 액세스하는 것이 빠르기 때문에 전역 검색을 줄이기 위해 전역 객체를 지역 변수로 저장합니다.

6. 지속적으로 실행되는 코드를 대상으로 하는 경우 setTimeout이 아닌 setInterval을 사용해야 합니다. 왜냐하면 setTimeout은 매번 타이머를 초기화하고 setInterval은 처음에만 타이머를 초기화하기 때문입니다.

7. 여러 문자열을 연결하려면 조건 분기를 만들 때 = less를 사용하고 조건 분기 대신 삼항 연산자를 사용해 보세요.

8. 많은 사람들이 parsInt()를 사용하기를 좋아합니다. 실제로는 Math.floor() 또는 Math를 사용하는 것이 아니라 문자열을 숫자로 변환하는 데 사용됩니다. .

9. JavaScript에서는 전체 스크립트의 실행 시간을 줄이기 위해 명령문 그룹인 단일 var 문을 사용하여 모든 변수를 선언할 수 있습니다.

10. 대규모 DOM 변경의 경우 표준 DOM 방법을 사용하여 동일한 DOM 구조를 만드는 것보다 innerHTML을 사용하는 것이 훨씬 빠릅니다.

11. 동일한 객체가 .onclick 쓰기 메소드를 사용하여 여러 메소드를 트리거하는 경우 후자의 메소드가 이전 메소드를 덮어씁니다. 즉, 객체의 onclick 이벤트가 발생하면 마지막 바인딩만 실행됩니다. . 방법. 이벤트 수신을 사용하면 덮어쓰기가 없으며 각 바인딩된 이벤트가 실행됩니다.

12. 유형 변환을 위해 toString() 메서드가 정의된 경우 toString()을 명시적으로 호출하는 것이 좋습니다. 내부 작업에서는 가능한 모든 가능성을 시도한 후 객체의 toString() 메서드를 시도하기 때문입니다. String으로 변환되므로 이 메서드를 직접 호출하는 것이 더 효율적입니다.

13. elemet.style은 인라인 스타일만 가져올 수 있기 때문에 element.currentStyle.width는 IE 브라우저 전용 속성이고, getCompulatedStyle(element, null).width는 Firefox 및 Chrome 브라우저에만 있는 속성이므로 순서대로 호환 가능하며, 내부 및 외부 스타일을 구하는 방법은 다음과 같습니다. (배경, 테두리 등의 복합 스타일은 권장하지 않으나, backgroundColor, borderWidth로 작성해야 함)

function getStyle(obj,name) {
   if(obj.currentStyle) {
     return obj.currentStyle[name];
   }
   else
   {
     return getComputedStyle(obj,null)[name];
   }
}

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.