[javascript] document.getElementById 및 jQuery $ ()

JAVASCRIPT / 글쓴이

이거 :

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

이것과 동일 :

var contents = $('#contents');

jQuery 가로 드되었다고 가정합니까?

답변

정확히!!

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

jQuery에서와 동일한 결과를 얻으려면 document.getElementByIdjQuery 객체에 액세스하여 객체의 첫 번째 요소를 가져올 수 있습니다 (자바 스크립트 객체는 연관 배열과 유사하게 작동 함을 기억하십시오).

var contents = $('#contents')[0]; //returns a HTML DOM Object

답변

아니.

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

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

따라서, 당신은 단지 같은 jQuery를 메서드 호출 할 수 있습니다 css()또는 animate()온 $()전화를.

또한 $(document.getElementById('id'))jQuery 객체를 반환하고 이에 해당하는을 쓸 수도 있습니다 $('#id').

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

답변

닫히지 만 동일하지는 않습니다. 그들은 동일한 요소를 얻지 만 jQuery 버전은 jQuery 객체로 래핑됩니다.

이에 상응하는 것은

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

아니면 이거

var contents = $('#contents')[0];

이것들은 jQuery 객체에서 요소를 가져옵니다.

답변

속도 차이에 대한 메모. 클릭시 통화에 다음 스 니펫을 연결하십시오.

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입니다 ( 25ms최대 52ms약 약 변동 15 runs).

반면에

jQuery를 대해 평균 200 밀리 초 (이르기 181ms까지 222ms약에 15 runs).

이 간단한 테스트에서 jQuery가 약 6 배의 시간 이 걸렸다는 것을 알 수 있습니다 .

물론, 그 이상입니다 10000반복 그래서 간단한 상황에서 아마 사용의 용이성과 같은 다른 멋진 것들 모두에 대한 jQuery를 사용하는 것 .animate등을 .fadeTo. 그러나 예, 기술적으로 getElementById는 훨씬 빠릅니다 .

답변

아니요. 첫 번째는 DOM 요소를 반환하거나 null 인 반면 두 번째는 항상 jQuery 개체를 반환합니다. 의 ID contents가 일치하는 요소가 없으면 jQuery 객체가 비어 있습니다 .

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

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

더 동등하지만 id contents가 일치하는 요소가 없으면 document.getElementById('contents')null $('#contents').get(0)을 반환 하지만 정의되지 않은 값 을 반환합니다.

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

답변

아니요, 실제로 동일한 결과는 다음과 같습니다.

$('#contents')[0]

jQuery는 쿼리에서 얼마나 많은 결과가 반환되는지 알지 못합니다. 다시 얻는 것은 쿼리와 일치하는 모든 컨트롤의 모음 인 특수 jQuery 객체입니다.

jQuery를 매우 편리하게 만드는 것의 일부는 하나의 컨트롤을위한 것처럼 보이는이 객체에서 호출 된 MOST 메소드가 실제로는 콜렉션의 모든 멤버에서 호출되는 루프에 있다는 것입니다.

[0] 구문을 사용하면 내부 컬렉션에서 첫 번째 요소를 가져옵니다. 이 시점에서 DOM 객체를 얻는다

답변

다른 사람이이 문제를 겪을 경우 … 또 다른 차이점은 다음과 같습니다.

id에 HTML 표준에서 지원하지 않는 문자가 포함되어 있으면 ( 여기서 SO 질문 참조 ) getElementById가 수행하더라도 jQuery에서 찾지 못할 수 있습니다.

Chrome을 사용하여 “/”문자 (예 : id = “a / b / c”)가 포함 된 ID가있는 경우 

var contents = document.getElementById('a/b/c');

내 요소를 찾을 수 있었지만 

var contents = $('#a/b/c');

하지 않았다.

Btw, 간단한 수정은 해당 ID를 이름 필드로 옮기는 것이 었습니다. JQuery는 다음을 사용하여 요소를 찾는 데 문제가 없었습니다.

var contents = $('.myclass[name='a/b/c']);