programing tip

$ (document.body)와 $ ( 'body') JQuery의 차이점

itbloger 2020. 9. 4. 07:01
반응형

$ (document.body)와 $ ( 'body') JQuery의 차이점


저는 JQuery 초보자이며 발견 된 일부 코드에서 몇 가지 예제를 살펴 봅니다.

$(document.body)$('body')

누구든지이 둘 사이에 차이점이 있다고 말할 수 있습니까?


그들은 동일한 요소를 참조하지만 차이점은 document.body요소를 jQuery에 직접 전달한다는 것입니다. 당신이 문자열을 전달하는 경우 또는 'body'jQuery를 선택 엔진 은을 참조 어떤 요소 (들) 파악하는 문자열을 해석 할 수있다.

실제로 둘 중 하나가 작업을 완료합니다.

관심이 있다면 jQuery 함수 에 대한 문서에 더 많은 정보가 있습니다 .


여기에있는 답변은 실제로 완전히 정확 하지 않습니다 . 닫았지만 엣지 케이스가 있습니다.

차이점은 $ ( 'body')는 실제로 태그 이름으로 요소를 선택하는 반면 document.body는 문서의 직접 객체를 참조한다는 것입니다.

즉, 사용자 (또는 불량 스크립트)가 document.body 요소 (부끄러움!)를 덮어 쓰면 $ ( 'body')는 여전히 작동하지만 $ (document.body)는 작동하지 않습니다. 따라서 정의상 동등하지 않습니다.

문서 개체에서 덮어 쓴 본문 요소의 양을 트리거하는 다른 경우 (예 : IE의 전역 적으로 id'ed 요소)가 있다고 추측하고 동일한 상황이 적용될 것입니다.


$(document.body)전역 참조를 사용 document받는 기준을 얻는 body반면 것은 $('body')jQuery를이 기준에 얻을하는 셀렉터이다 <body>상의 소자 document.

내가 볼 수있는 큰 차이는 없으며, 하나에서 다른 것으로 눈에 띄는 성능 향상도 없습니다.


내 브라우저에서 테스트 할 때 타이밍에서 꽤 큰 차이를 발견했습니다.

다음 스크립트를 사용했습니다.

경고 : 이것을 실행하면 브라우저가 약간 정지되고 충돌 할 수도 있습니다.

var n = 10000000, i;
i = n;
console.time('selector');
while (i --> 0){
    $("body");
}

console.timeEnd('selector');

i = n;
console.time('element');
while (i --> 0){
    $(document.body);
}

console.timeEnd('element');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

나는 천만 번의 상호 작용을 수행했고 그 결과는 다음과 같습니다 (Chrome 65).

선택기 : 19591.97509765625ms
요소 : 4947.8759765625ms

요소를 직접 전달하는 것이 선택자를 전달하는 것보다 약 4 배 빠릅니다.


전혀 차이가 없어야합니다. 아마도 첫 번째가 조금 더 성능이 좋을 수도 있지만 사소하다고 생각합니다 (진짜 걱정할 필요가 없습니다).

둘 다 <body>jQuery 객체에 태그 를 래핑 합니다.


Outputwise 둘 다 동등합니다. 두 번째 표현식은 DOM 루트에서 하향식 조회를 거칩니다. JQuery가 래핑 할 수있는 document.body 객체가 이미 있다면 추가 오버 헤드를 피할 수 있습니다 (미소 일 수 있음). http://api.jquery.com/jQuery/ #Selector Context 참조

참고 URL : https://stackoverflow.com/questions/12307112/difference-between-document-body-and-body-jquery

반응형