[javascript] document.getElementById와 jQuery $ ()


Answers

아니.

document.getElementById('id') 호출하면 원시 DOM 객체가 반환됩니다.

$('#id') 호출하면 DOM 객체를 래핑하고 jQuery 메서드를 제공하는 jQuery 객체가 반환됩니다.

따라서 $() 호출에서 css() 또는 animate() 와 같은 jQuery 메서드 만 호출 할 수 있습니다.

$(document.getElementById('id')) 를 작성하여 jQuery 오브젝트를 리턴하고 $('#id') 와 동일하게 작성할 수도 있습니다.

$('#id')[0] 을 작성하여 jQuery 객체에서 기본 DOM 객체를 가져올 수 있습니다.

Question

이것은 :

var contents = document.getElementById('contents');

이 같은 :

var contents = $('#contents');

jQuery가로드 된 것을 감안할 때?




대부분의 사람들과 마찬가지로 주요 차이점은 바로 jQuery 호출을 사용하여 jQuery 객체에 래핑 된 사실과 곧은 JavaScript를 사용하는 원시 DOM 객체에 있다는 점입니다. jQuery 객체는 물론 다른 jQuery 함수도 수행 할 수 있습니다. 기본 스타일링이나 기본 이벤트 처리와 같은 단순한 DOM 조작 만하면되는 경우, 스트레이트 JavaScript 메서드는 jQuery보다 항상 조금 빠릅니다. JavaScript로 작성된 외부 코드 라이브러리에로드해야합니다. 그것은 여분의 단계를 저장합니다.




아니요. 첫 번째 요소는 DOM 요소 또는 null을 반환하지만 두 번째 요소는 항상 jQuery 개체를 반환합니다. contents 의 id를 가진 요소가 일치하지 않으면 jQuery 객체는 비어있을 것이다.

document.getElementById('contents') 의해 반환 된 DOM 요소를 사용하면 .innerHTML (또는 .value ) 등을 변경할 수 있지만 jQuery 객체에 jQuery 메서드 를 사용해야합니다.

var contents = $('#contents').get(0);

좀 더 일치하지만 id가 일치하는 요소가없는 경우 document.getElementById('contents') 는 null을 반환하지만 $('#contents').get(0) 은 undefined를 반환합니다.

jQuery 객체를 사용할 때 얻을 수있는 한 가지 이점은 객체가 항상 반환되므로 아무런 요소도 반환되지 않으면 오류가 발생하지 않는다는 것입니다. 그러나 document.getElementById 반환 한 null 에 대한 작업을 수행하려고하면 오류가 발생합니다.




속도 차이에 대한 메모. 다음 스 니펫을 onclick 호출에 연결하십시오.

function myfunc()
{
    var timer = new Date();

        for(var i = 0; i < 10000; i++)
        {
            //document.getElementById('myID');
            $('#myID')[0];
        }


    console.log('timer: ' + (new Date() - timer));
}

다른 사람의 의견을 말하고 다른 사람의 의견을 말하십시오. 내 테스트에서,

document.getElementbyId는 평균 약 35ms (약 15 runs 25ms 에서 52ms 변동)

반면에,

jQuery는 평균 약 200ms (약 15 runs 222ms 에서 181ms 까지)였습니다.

이 간단한 테스트를 통해 jQuery가 약 6 배의 시간 이 소요됨을 알 수 있습니다.

물론 그것은 10000 반복입니다. 그래서 단순한 상황에서 사용하기 쉽도록 jQuery를 사용하고 .animate.fadeTo 와 같은 다른 멋진 것들을 사용합니다. 하지만 그렇습니다. 기술적으로 getElementById 는 꽤 빠릅니다 .




var contents = document.getElementById('contents');

var contents = $('#contents');

코드 스 니펫은 동일하지 않습니다. 첫 번째는 Element 객체 ( source )를 반환합니다. 둘째, jQuery와 동일한 기능을 수행하면 0 또는 하나의 DOM 요소 컬렉션이 포함 된 jQuery 객체가 반환됩니다. ( jQuery 문서 ). 내부적으로 jQuery는 효율성을 위해 document.getElementById() 를 사용합니다.

두 경우 모두 둘 이상의 요소가 발견되면 첫 번째 요소 만 반환됩니다.

jQuery에 대한 github 프로젝트를 검사 할 때 document.getElementById 코드 ( https://github.com/jquery/jquery/blob/master/src/core/init.js 줄 68 이후)를 사용하는 것으로 보이는 다음 코드 조각을 발견했습니다.

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );



Links