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

104

저는 jQuery 초보자이며 몇 가지 코드 예제를 살펴보면서 발견했습니다.

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

이 둘 사이에 차이점이 있습니까?

jquery document document-body

— Ashleedawg
소스

1

하나는 더 빠르지 만 한 페이지에서 몇 번 이상 호출되지 않는다는 점을 고려하면 둘의 차이는 매우 작습니다.

— Kevin B

$(body).on('click'...이벤트 에는 작동하지 않지만 $(document.body)및 $(document)둘 다 작동합니다.

— rybo111

3

위의 진술은 거짓이며 또한 성능에 약간의 차이가 있습니다. $ (document.body)가 약 10 % 찬성합니다. 현재 비교를 볼 수 있습니다 sitepoint.com/jquery-body-on-document-on

— 지기 스 문트

77

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

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

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

— 저스틴에 티어
소스

1

첫 번째 진술은 완전히 정확하지 않습니다. 그들은 수 같은 요소를 참조하십시오. 보통 짝수. 그러나 항상 그런 것은 아닙니다 :). 아래 내 대답을 참조하십시오.

— jvenema

18

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

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

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

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

— Jvenema
소스

나는 세트에 가능한 생각하지 않습니다 document.body이외의 다른 <body>: i.imgur.com/unJVwXy.png

— mpen

지금 해결 될 수 있습니다. FF와 IE가이 작업을 허용하거나 ID가 "body"인 항목으로 인해 혼란 스러울 때가있었습니다 (내가 부딪친 오류는 태그가 붙은 성형 외과 의사 사이트에서 스크립트를 사용하는 고객이었습니다. id "body"). 더 이상 문제가되지

— 않기를

12

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

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

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

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 배 빠릅니다.

— 화이터
소스

7

당신은 단지 "화살표 표기법"에 대한 찬성표를 얻습니다, 당신은 건방진 당신을 phiter!

— KlaymenDK

1

나는 이것에 대해 어딘가

— Phiter

예,하지만 정말 천만 번 할 건가요? 왜 중요한 곳에서 이런 종류의 분석을하지 않습니까?

— scrayne

@scrayne 이러한 성능 테스트는 실제 사용 사례에 관한 것이 아닙니다. 이와 같은 요소에 대해 천만 작업을 수행하는 것은 매우 드뭅니다. 그러나 OP는 그 차이를 알고 싶었고 성능 차이가 있음을 알았으므로 주목할 가치가 있다고 생각합니다.

— Phiter

9

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

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

— Gabe
소스

9

$(document.body)이 문서에 따르면 잴 빠른 : sitepoint.com/jquery-body-on-document-on

— 스티브 해리슨

6

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

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

— 니콜라 펠 루체 티
소스

3

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

— 산톤
소스