document.getElementById 및 jQuery $ ()

620

이거 :

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

이것과 동일 :

var contents = $('#contents');

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

javascript jquery jquery-selectors

— 필립 센
소스

10

답변에서 제기 된 사항 외에도 jQuery 버전은 앱입니다. 100 배 느립니다.

8

이것이 어딘가에 입증 되었습니까?

— FranBran

12

@torazaburo 실제로 jQuery 버전은 (최소한 최신 Chrome에서는) 3 배 느리지 않습니다. 참조 : jsperf.com/getelementbyid-vs-jquery-id/44

— Michał Perłakowski

2

해당 링크의 @ MichałPerłakowski는 jquery 버전이 10 배 느립니다. 26mil vs 2.4mil

— Claudiu Creanga

1

JSPerf의 올바른 업데이트 링크는 다음과 같습니다. jsperf.com/getelementbyid-vs-jquery-id 내 경우에는 (FF 58) 속도가 1000 배 느립니다. 어쨌든 jQuery는 여전히 초당 250 만 개의 작업을 수행합니다. 일반적으로 이는 문제가되지 않으며 기능 측면에서 비교할 수 없습니다.

— Diego Jancic

1017

정확히!!

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

— John Hartsock
소스

24

관심있는 사람 document.getElementBy은 <IE8에서 제대로 작동하지 않습니다. 또한 name이론적으로 document.getElementById오해의 소지가있을뿐만 아니라 잘못된 값을 반환 할 수 있다고 주장 할 수있는 요소를 가져 옵니다. 나는 @John이 이것을 새롭게 생각하지만 그것을 추가하는 것이 아프지 않을 것이라고 생각했습니다.

— Lime

14

식별자가 고정되어 있지 않은 경우주의하십시오. $('#'+id)[0]동일하지 않은 document.getElementById(id)때문에 idjQuery를 특수 처리하는 문자를 포함 할 수 있습니다!

— Jakob

1

이것은 매우 도움이되었습니다-이것을 몰랐습니다! 그래도 실제로 그것을 실제로 사용 했다고 확신 합니다. 이봐, 너는 매일 무언가를 배운다! 감사!

— jedd.ahyoung

3

구글 jquery equivalent of document.getelementbyid과 첫 번째 결과는이 게시물입니다. 감사합니다!!!

— ajakblackgoat

$('#contents')[0].idid 이름을 반환합니다.

— Omar

139

아니.

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

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

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

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

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

— 슬랙
소스

4

$ (document.getElementById ( 'element')) vs $ ( '# element') 중 어느 것이 더 빠른지 알고 있습니까?

— Ivan Ivković

10

@ IvanIvković : 첫 번째는 문자열 파싱을 포함하지 않기 때문에 더 빠릅니다.

— SLaks

1

@SLaks 원시 DOM 객체와 jQuery 객체의 주요 차이점은 무엇입니까? jQuery 객체를 사용하면 jQuery 메소드를 적용 할 수 있습니까?

— Roxy'Pro

@ Roxy'Pro : 그것들은 다른 객체입니다. jQuery 객체는 DOM 객체를 래핑합니다. 설명서를 참조하십시오.

— SLaks

이 문서 JavaScript DOM 객체 대 jQuery 객체 는 유용하게 보입니다.

In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.

— user3454439

31

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

이에 상응하는 것은

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

아니면 이거

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

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

— RightSaidFred
소스

29

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

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는 훨씬 빠릅니다 .

— nurdyguy
소스

이 답변에 감사드립니다. 나는 모든 대체한다, 물어보고 싶은게 $('#someID') 로 document.getElementById("someID") ? 광범위하게 사용 $('#someID')하고 큰 파일 입력에 대해 페이지가 느리게 실행 되는 작업을하고 있습니다. 내 움직임이 무엇인지 제안하십시오.

— Mazhar MIK

동일한 범위에서 동일한 것을 여러 번 var $myId = $('#myId');재사용하는 경우 저장된 변수와 같이 저장하고 재사용하십시오 $myId. id로 찾기는 일반적으로 매우 빠르지 만 페이지가 느리면 다른 이유가 있습니다.

— nurdyguy

감사합니다 @nurdyguy. 도움이되었습니다. 나는 그것을 구현하려고 노력할 것이다.

— Mazhar MIK

17

아니요. 첫 번째는 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

— 매트
소스

15

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

$('#contents')[0]

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

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

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

— 안드레이
소스

10

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

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']);

— 사용자 1435666
소스

5

대부분의 사람들이 말했듯이 주요 차이점은 jQuery 호출을 사용하여 jQuery 객체와 직선 JavaScript를 사용하는 원시 DOM 객체로 래핑된다는 사실입니다. jQuery 객체는 물론 다른 jQuery 함수를 사용할 수 있지만 기본 스타일 또는 기본 이벤트 처리와 같은 간단한 DOM 조작을 수행 해야하는 경우 직선 JavaScript 메소드는 항상 jQuery보다 약간 빠릅니다. JavaScript로 작성된 외부 코드 라이브러리에로드하지 않아도됩니다. 추가 단계를 저장합니다.

— 코비
소스

5

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

var contents = $('#contents');

코드 스 니펫이 동일하지 않습니다. 첫 번째는 Element객체 ( source )를 반환합니다 . 두 번째 jQuery는 0 또는 1 개의 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] );

— 니 푸나
소스

4

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

또한 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의 선택성이 도움이 될 수 있습니다.

— 스티브 뱅크스
소스

2

jQuery는 JavaScript를 기반으로합니다. 이것은 어쨌든 단지 자바 스크립트라는 것을 의미합니다.

document.getElementById ()

document.getElementById () 메소드는 지정된 값을 가진 ID 속성을 가진 요소를 리턴하고 지정된 ID를 가진 요소가 없으면 널을 리턴합니다. ID는 페이지 내에서 고유해야합니다.

jquery $ ()

인수로 id 선택기를 사용하여 jQuery () 또는 $ ()를 호출하면 0 또는 하나의 DOM 요소 컬렉션이 포함 된 jQuery 객체가 반환됩니다. 각 id 값은 문서 내에서 한 번만 사용해야합니다. 둘 이상의 요소에 동일한 ID가 할당 된 경우 해당 ID를 사용하는 쿼리는 DOM에서 처음 일치하는 요소 만 선택합니다.

— 하디 미르
소스

1

페이지의 모든 DOM 요소에 대한 참조가 짧은 색인에 저장되는 웹 브라우저에 DOM 트리를 저장하기위한 noSQL 데이터베이스를 개발했습니다. 따라서 "getElementById ()"함수는 요소를 가져 오거나 수정하는 데 필요하지 않습니다. DOM 트리의 요소가 페이지에서 인스턴스화되면 데이터베이스는 서로 게이트 기본 키를 각 요소에 할당합니다. 그것은 무료 도구입니다 http://js2dx.com

— 곤키
소스

1

위의 모든 답변이 정확합니다. 실제 결과를보고 싶은 경우 브라우저에 실제 결과가 명확하게 표시되는 콘솔이 있다는 것을 잊지 마십시오.

HTML이 있습니다 :

<div id="contents"></div>

콘솔로 이동하여이 (cntrl+shift+c)명령을 사용하여 결과를 명확하게 확인하십시오.

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

보시다시피, 첫 번째 경우에는 태그 자체 (즉, HTMLDivElement 객체)를 얻었습니다. 후자에는 실제로 일반 객체가 아니라 객체 배열이 있습니다. 위의 다른 답변에서 언급했듯이 다음 명령을 사용할 수 있습니다.

$('#contents')[0]
>>> div#contents

— 마 사르 MIK
소스

1

2019 년 현재 모든 답변이 오래되었습니다. 자바 코드로 id 키가있는 fild에 직접 액세스 할 수 있습니다

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

온라인 데모! -https : //codepen.io/frank-dspeed/pen/mdywbre

— 솔직한 속도
소스