javascript - 속성 document.getElementById와 jQuery $ ()




5 Answers

아니.

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

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

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

또한 $(document.getElementById('id')) 를 작성하여 jQuery 오브젝트를 리턴하며 $('#id') 와 동일합니다.

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

getelementbyid 변수

이것은 :

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

이 같은 :

var contents = $('#contents');

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




속도 차이에 대한 메모. 다음 스 니펫을 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 는 꽤 빠릅니다 .




아니, 실제로 같은 결과가 나타납니다.

$('#contents')[0] 

jQuery는 얼마나 많은 결과가 쿼리에서 반환 될지 알지 못합니다. 돌아 오는 것은 쿼리와 일치하는 모든 컨트롤의 컬렉션 인 특별한 jQuery 객체입니다.

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

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




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




또 다른 차이점은 getElementById첫 번째 일치를 반환하고 $('#...') 는 일치 항목의 컬렉션을 반환합니다. 예, 동일한 ID를 HTML 문서에서 반복 할 수 있습니다.

또한 getElementId 가 문서에서 호출되는 반면 $('#...') 는 선택기에서 호출 할 수 있습니다. 따라서 아래 코드에서 document.getElementById('content') 는 전체 본문을 반환하지만 $('form #content')[0] 은 양식 내부를 반환합니다.

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

중복 ID를 사용하는 것이 이상하게 보일 수 있지만 Wordpress와 같은 것을 사용하는 경우 템플릿 또는 플러그인은 콘텐츠에서 사용하는 것과 동일한 ID를 사용할 수 있습니다. jQuery의 선택성은 당신을 도울 수 있습니다.




Related