Document.all , document.getElementById ,

[정확히 알고 넘거가기 위해......스크랩포스팅]

document.all 은 모든 태그 요소들을 스캔합니다. IE가 성능이 느린 이유 중 하나가 바로 document.all 이죠.
속성인 이상 여러번 스캔을 하고, 동적으로 DOM 이 변경되도 동작하기 때문에 다른 브라우저는 순식간에 레이아웃 잡히는데 IE만 유독 눈에 띄게 이상한 레이아웃 잡다가 이제서야 레이아웃 잡는 경우도 바로 이 document.all 덕분이죠.

그래서 제가 ECMAScript 5 표준으로 document.all 을 살린다면 이런 식이 되겠습니다.
Object.defineProperty(document, "all", {
    get: function(){
        var dup = {};
        return (function(all){
            for(var i=0,len=all.length;i<len;i++){
                var id = all[i].id, name = all[i].name;
                if(id && dup[id] != 'id'){
                    all[id] = all[i];
                    dup[id] = 'id';
                }
                if(name && !dup[name]){
                    all[name] = document.getElementsByName(name);
                    dup[name] = 'name';
                }
            }
            return all;
        })(document.getElementsByTagName('*'));
    }
});

자. 봐도 성능이 느려질 것 같은 스크립트 같죠?
그렇습니다. document.all 은 링크 #1 MSDN 문서를 참고하시면 HTML, HEAD 및 TITLE 태그까지 싸그리 참조한다고 합니다. 위와 비슷한 식이 되는거죠.

그렇다면 document.all 을 대체할 수 있는 방법이 뭘까요?
2가지 기능으로 나눠 보겠습니다.

1.<span id='asd'>특정문장</span>
아주 간단합니다. document.getElementById('asd') 조금만 더 쓰면 더 빠르게 불러올 수 있습니다.
당연한 얘기지만 id 는 유일해야 합니다. 유일하지 않다면, 처음 id 가 정의된 객체만 가져옵니다.

2.<a name='asd'>책갈피</a>
이것도 간단합니다. document.getElementsByName('asd') 로 name 들어간 모든 객체를 불러오게 됩니다.

document.getElementById
아마 모든 웹 개발자가 알고 있는 문법일 것이다
비 표준 탐색 스크립트를 평정하고 W3C 에서 표준으로 정한 탐색 스크립트가 바로 document.getElementById 이다. 앞서 document.all을 다음과 같이 대체할 수 있다. 그리고 표준이기 때문에 브라우저 호환성이 보장된다
var element = document.getElementById("myDiv");

이제 document.all 은 잊어 버리고 document.getElementId 를 사용하자. 이미 오래전에 잊었겠지만...


document.getElementsByTagName
getElementById 와 쌍을 이루는 유명한 문법일 것이다.
getElementsByTagName는 getElementById와 마찬가지로 표준 스크립트이며 딱 두가지 차이점이 존재한다.

1) 하나 이상의 요소 즉 요소의 배열을 반환한다
getElementsByTagName 이 반환하는 것은 요소배열이다.
비록 반환되는 요소가 단 1개라도 배열 접근 형식(ex element[0]) 을 취해야 한다.

2) 요소에 부여된 ID가 아닌 태그에 기반한다
getElementById 가 요소에 부여된 ID를 기반으로 탐색을 수행한다면, getElementsByTagName는 요소의 태그명에 기반한다. 즉 div, table, img 와 같은 요소태그를 대상으로 탐색을 수행한다

이런 특징은 일종의 유연성을 제공해 준다. getElementById 와 같이 ID를 기반으로 한다는 것은 일종의 규칙이다. 즉 미리 정의된 ID가 있어야 한다는 규칙이 성립해야 한다. 만일 웹 문서 파서(parse)와 같은 범용적인 외부 제작툴을 개발한다면 이런 규칙을 적용할 수 없기 때문에 공통적인 태그를 기반으로 한다는 것이 유연성이 있다는 예기이다

페이지에 다음과 같이 두개이 div가 정의되어 있다면,
<div>First Div</div>  <div>Second Div</div>

다음과 같이 전체 div요소를 탐색할 수 있다
var element = document.getElementsByTagName("div");    

for(var i = 0; i < element.length; i++){
   alert(element[i].nodeName);  
}


document.getElementsByClassName
웹킷(webkit) 기반 브라우저에서 적용한 탐색 스크립트이다.
getElementByID의 경우 ID가 부여된 단 하나의 요소만을 탐색할 뿐이며 getElementsByTagName의 경우 동일 태그의 모든 요소를 반환한다. 만일 임의의 이름이 부여된 특정 그룹을 탐색하고자 할 경우 이 두가지만으로는 한번에 만족시킬 수 없다. getElementsByClassName 은 그 이름에서도 알 수 있듯이 className 이 부여된 요소(그룹)을 반환한다.

페이지에 다음과 같이 동일한 class가 부여된 div 요소가 정의되어 있다면,
<div class="myDivClass">First Div</div>
<div class="myDivClass">Second Div</div>

다음과 같이 class 명으로 div 요소 그룹을 탐색할 수 있다

var element1 = document.getElementsByClassName("myDivClass");    
    
for(var i = 0; i < element1.length; i++){
   alert(element1[i].nodeName);  
}

document.querySelectorAll
CSS Selector 규칙을 그대로 이용할 수 있는 방법이 생겼다
W3C 에서는 보다 유연한 탐색을 지원하기 위해 CSS 규칙을 기반으로 하는 Selectors API 를 표준화 시켰다
querySelectorAll 함수를 통해 CSS 탐색 규칙을 맘껏(?) 적용할 수 있다

페이지에 다음과 같이 div 안에 p 요소가 정의되었다고 가정할 때,
<div id="myDiv">
   <p>First paragraph.</p>
   <p>Second paragraph.</p>
</div>

다음과 같이 CSS 규칙을 이용하여 요소를 쉽게 탐색할 수 있다
var element = document.querySelectorAll("#myDiv p");

for(var i = 0; i < element.length; i++ ) {  
    element[i].style.backgroundColor = "red";
}

또한 querySelector 을 통해 특정 요소를 다음과 같이 탐색할 수 있다
var element = document.querySelector("#myDiv > p:first-child")
alert(element.nodeName);

중요한 것은 CSS 탐색 규칙 즉 CSS Selector 을 이용하여 보다 강력한 탐색이 가능하다는 점이다

출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=77916     /   http://m.mkexdev.net/107