document.getElementById vs jQuery $()
Is this:
var contents = document.getElementById('contents');
The same as this:
var contents = $('#contents');
Given that jQuery is loaded?
Not exactly!!
document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents'); //returns a jQuery Object
jQuery에서 다음과 같은 결과를 얻으려면document.getElementByIdjQuery 객체에 액세스하여 객체의 첫 번째 요소를 가져올 수 있습니다(JavaScript 객체는 연관 배열과 동일하게 동작합니다).
var contents = $('#contents')[0]; //returns a HTML DOM Object
No.
부르기document.getElementById('id')raw DOM 오브젝트를 반환합니다.
부르기$('#id')는 DOM 개체를 랩하고 jQuery 메서드를 제공하는 jQuery 개체를 반환합니다.
따라서 다음과 같은 jQuery 메서드만 호출할 수 있습니다.css()또는animate()에서$()불러.
글씨를 쓸 수도 있습니다.$(document.getElementById('id'))이는 jQuery 객체를 반환하며 다음과 같습니다.$('#id').
jQuery 개체에서 기본 DOM 개체를 가져올 수 있습니다.$('#id')[0].
Close, but not the same. They're getting the same element, but the jQuery version is wrapped in a jQuery object.
The equivalent would be this
var contents = $('#contents').get(0);
or this
var contents = $('#contents')[0];
These will pull the element out of the jQuery object.
A note on the difference in speed. Attach the following snipet to an onclick call:
function myfunc()
{
var timer = new Date();
for(var i = 0; i < 10000; i++)
{
//document.getElementById('myID');
$('#myID')[0];
}
console.log('timer: ' + (new Date() - timer));
}
Alternate commenting one out and then comment the other out. In my tests,
document.getElementbyId는 평균 약 35밀리초입니다(플럭처:
25ms까지52ms에 대해 떠들어대는.15 runs)
On the other hand, the
jQuery는 평균 약 200밀리초(범위:
181ms로.222ms에 대해 떠들어대는.15 runs).From this simple test you can see that the jQuery took about 6 times as long.
물론 그것은 끝났다.10000따라서 간단한 상황에서는 사용하기 쉬운 jQuery와 같은 다른 모든 멋진 것들을 사용할 수 있습니다..animate그리고..fadeTo하지만 엄밀히 말하면getElementById좀 더 빠릅니다.
아니요. 첫 번째는 DOM 요소 또는 늘을 반환하고 두 번째는 항상 jQuery 개체를 반환합니다.ID가 다음과 같은 요소가 없는 경우 jQuery 개체는 비어 있습니다.contents일치했습니다.
반환된 DOM 요소document.getElementById('contents')를 변경할 수 있습니다..innerHTML(또는.value단, jQuery 객체에서는 jQuery 메서드를 사용해야 합니다.
var contents = $('#contents').get(0);
단, ID가 다음과 같은 요소가 없는 경우 더 모호합니다.contents일치합니다.document.getElementById('contents')null을 반환하지만$('#contents').get(0)정의되지 않은 상태로 반환됩니다.
jQuery 객체를 사용하는 것의 이점 중 하나는 객체가 항상 반환되므로 요소가 반환되지 않아도 오류가 발생하지 않는다는 것입니다.단, 에서 작업을 수행하려고 하면 오류가 발생합니다.null returned returned returned returned returned returned returned returned returneddocument.getElementById
아니요, 실제로는 다음과 같은 결과가 됩니다.
$('#contents')[0]
jQuery는 쿼리에서 반환되는 결과 수를 알 수 없습니다.쿼리와 일치하는 모든 컨트롤의 집합인 특수 jQuery 개체로 반환됩니다.
jQuery가 매우 편리한 이유 중 하나는 이 오브젝트에 대해 호출된 MOST 메서드가 하나의 컨트롤에 대해 의도된 것처럼 보이지만 실제로는 컬렉션의 모든 멤버에게 호출된 루프에 있다는 것입니다.
[0] 구문을 사용하는 경우 내부 컬렉션에서 첫 번째 요소를 가져옵니다.이 시점에서 DOM 오브젝트를 취득합니다.
혹시 다른 사람이 이걸 치면...또 다른 차이점이 있습니다.
HTML 표준에서 지원되지 않는 문자가 ID에 포함되어 있는 경우(여기 SO 질문 참조), getElementById에서 지원되지 않는 경우라도 jQuery에서 찾을 수 없습니다.
Chrome을 사용하여 "/" 문자를 포함하는 ID(예: id="a/b/c")에서 이 문제가 발생했습니다.
var contents = document.getElementById('a/b/c');
내 요소를 찾을 수 있었지만:
var contents = $('#a/b/c');
하지 않았다.
그나저나 간단한 수정은 ID를 이름 필드로 옮기는 것이었습니다.JQuery는 다음을 사용하여 요소를 찾는 데 문제가 없었습니다.
var contents = $('.myclass[name='a/b/c']);
대부분의 사람들이 말했듯이, 주요 차이점은 jQuery 콜과 straight JavaScript를 사용하는 raw DOM 오브젝트로 감싸져 있다는 것입니다.jQuery 오브젝트는 물론 다른 jQuery 함수를 사용할 수 있지만 기본 스타일링이나 기본 이벤트 처리와 같은 간단한 DOM 조작만 하면 자바스크립트 기반의 외부 코드 라이브러리에 로드하지 않아도 되기 때문에 스트레이트 자바스크립트 메서드는 항상 jQuery보다 약간 빠릅니다.한 단계 더 단축됩니다.
한 차이점: 른른른른른른른:getElementById는 첫 번째 일치를 반환합니다.$('#...')일치사항 컬렉션을 반환합니다. 예. HTML 문서에서 동일한 ID를 반복할 수 있습니다.
,,getElementId되며, 는 문서에서 호출됩니다.$('#...')는 셀렉터에서 호출할 수 있습니다.다음에서는요, 그, 래, 래, 래, 드, 아, so, so, so, so, so, so.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의 선택성이 도움이 될 수 있습니다.
var contents = document.getElementById('contents');
var contents = $('#contents');
첫 가 반환됩니다.Elementobject(소스).두 번째 jQuery 등가에서는 0 또는 1개의 DOM 요소의 컬렉션을 포함하는 jQuery 개체가 반환됩니다.(jQuery 문서).내부 jQuery 사용document.getElementById()효율화를 실현합니다.
두 경우 모두 두 개 이상의 요소가 발견되면 첫 번째 요소만 반환됩니다.
github 프로젝트에서 jQuery를 체크한 결과 document.getElementById 코드(https://github.com/jquery/jquery/blob/master/src/core/init.js line 68 이후)를 사용하고 있는 것으로 보이는 다음 행 스니펫이 발견되었습니다.
// HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] );
현재 2019년 현재 모든 답변이 오래되었습니다. javascript에서 id keyed filds에 직접 액세스할 수 있습니다.그냥 시도해 보세요.
<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>
온라인 데모! - https://codepen.io/frank-dspeed/pen/mdywbre
jQuery는 JavaScript를 기반으로 구축됩니다.어쨌든 javascript일 뿐이라는 뜻입니다.
document.getElementById()
document.getElementById() 메서드는 지정된 값을 가진 ID 속성을 가진 요소를 반환하고 지정된 ID를 가진 요소가 존재하지 않으면 null을 반환합니다.ID는 페이지 내에서 고유해야 합니다.
Jquery $()
id 셀렉터를 인수로 사용하여 jQuery() 또는 $()를 호출하면 0 또는 1개의 DOM 요소의 컬렉션을 포함하는 jQuery 개체가 반환됩니다.각 ID 값은 문서 내에서 한 번만 사용해야 합니다.여러 요소에 동일한 ID가 할당되어 있는 경우 해당 ID를 사용하는 쿼리는 DOM에서 가장 먼저 일치하는 요소만 선택합니다.
위의 답변은 모두 정답입니다.실제 결과를 명확하게 볼 수 있는 콘솔이 브라우저에 있는 것을 잊지 마십시오.
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
언급URL : https://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery
'programing' 카테고리의 다른 글
| 잘못된 후크 호출입니다.후크는 기능 구성 요소의 본체 내부에서만 호출할 수 있습니다. (0) | 2022.09.26 |
|---|---|
| 가장 가까운 정수로 반올림 (0) | 2022.09.26 |
| 값과 키를 모두 PHP 어레이에 푸시하는 방법 (0) | 2022.09.26 |
| 보기를 프로그래밍 방식으로 숨기려면 어떻게 해야 합니까? (0) | 2022.09.26 |
| AngularJS를 사용하여 확인란 값 목록에 바인딩하려면 어떻게 해야 합니까? (0) | 2022.09.26 |