[javascript] jQuery 객체 및 DOM 요소

Program / 글쓴이

jQuery 객체와 DOM 요소의 관계를 이해하고 싶습니다.

jQuery가 요소를 반환 [object Object]하면 경고 처럼 표시됩니다 . 시 getElementByID는로 나타 요소를 반환합니다 [object HTMLDivElement]. 그게 정확히 무엇을 의미합니까? 내 말은 둘 다 차이가있는 객체인가?

또한 jQuery 객체와 DOM 요소에서 어떤 메소드가 작동 할 수 있습니까? 단일 jQuery 객체가 여러 DOM 요소를 나타낼 수 있습니까?

답변

jQuery 객체와 DOM 요소 간의 관계를 이해하고 싶습니다.

jQuery 객체는 DOM 요소를 포함하는 배열과 같은 객체입니다. jQuery 객체는 사용하는 선택기에 따라 여러 DOM 요소를 포함 할 수 있습니다.

또한 jQuery 객체와 DOM 요소에서 어떤 메소드가 작동 할 수 있습니까? 단일 jQuery 객체가 여러 DOM 요소를 나타낼 수 있습니까?

jQuery 함수 (전체 목록은 웹 사이트에 있음)는 DOM 요소가 아닌 jQuery 객체에서 작동합니다. .get()원하는 인덱스의 요소를 직접 사용 하거나 액세스 하여 jQuery 함수 내의 DOM 요소에 액세스 할 수 있습니다 .

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

즉, 다음과 같은 결과를 얻을 수 있습니다.

<div id="foo"></div>

alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

jQuery 객체에 대한 자세한 내용 은 설명서를 참조하십시오 . 또한 문서를 확인하십시오..get()

답변

jQuery를 사용하여 DOM 요소를 가져 오면 jQuery 객체 반환에는 요소에 대한 참조가 포함됩니다. 와 같은 기본 함수를 사용 getElementById하면 jQuery 객체에 포함되지 않고 요소에 대한 참조를 직접 가져옵니다.

jQuery 객체는 여러 DOM 요소를 포함 할 수있는 배열과 같은 객체입니다.

var jQueryCollection = $("div"); //Contains all div elements in DOM

위의 줄은 jQuery없이 수행 할 수 있습니다.

var normalCollection = document.getElementsByTagName("div");

사실, 이것이 바로 .NET과 같은 간단한 선택기를 전달할 때 jQuery가 내부적으로 수행하는 작업 div입니다. 다음 get메소드를 사용하여 jQuery 컬렉션 내의 실제 요소에 액세스 할 수 있습니다 .

var div1 = jQueryCollection.get(0); //Gets the first element in the collection

jQuery 객체 내에 요소 또는 요소 집합이있는 경우 jQuery API에서 사용할 수있는 모든 메서드를 사용할 수 있지만 원시 요소가있는 경우 네이티브 JavaScript 메서드 만 사용할 수 있습니다.

답변

나는 지난달에 jQuery를 거의 사용하기 시작하지 않았고 비슷한 질문이 떠올랐다. 지금까지받은 모든 답변은 유효하고 점에 있지만 매우 정확한 답변은 다음과 같습니다.

함수에 있고 호출 요소를 참조하기 위해 this, 또는 $(this);을 사용할 수 있다고 가정 해 보겠습니다 . 그러나 차이점은 무엇입니까? 을 사용할 때 jQuery 객체 내부 $(this)에 래핑 this됩니다. 이점은 객체가 jQuery 객체이면 모든 jQuery 함수를 사용할 수 있다는 것입니다.

var s = '<div>hello <a href='#'>world</a></div><span>!</span>'문자 그대로 $ () :로 래핑하여 jQuery 객체 내부 에 요소의 문자열 표현을 래핑 할 수도 있으므로 매우 강력 합니다 $(s). 이제 jQuery로 모든 요소를 ​​조작 할 수 있습니다.

답변

대부분의 jQuery 멤버 Functions에는 반환 값이 없지만 현재 jQuery Object또는 다른 jQuery Object.

그래서, 

console.log("(!!) jquery >> " + $("#id") ) ;

[object Object], 즉에 대해 jQuery Object선택자 String( "#id") 를 평가 한 결과 인 컬렉션을 유지하는 a 를 반환 합니다 Document.

동안 ,

console.log("(!!) getElementById >> " + document.getElementById("id") ) ;

반환 [object HTMLDivElement](또는 실제로 [object Object]IE에서) 반환 값은 때문에 / 인 경우 div Element.

또한 jQuery 객체와 DOM 요소에서 어떤 메소드가 작동 할 수 있습니까? (1) 단일 jQuery 객체가 여러 DOM 요소를 나타낼 수 있습니까? (2)

(1) FunctionjQuery에는 DOM과 관련된 구성원 호스트가 Object있습니다. imo를 수행하는 가장 좋은 방법 Function은 특정 작업 (예 : Nodes 선택 또는 조작) 이 있으면 jQuery API 문서에서 관련성을 검색하는 것입니다.

(2) 예, 한 사람 jQuery Object이 여러 DOM 목록을 유지할 수 있습니다 Element. 이 자동 캐싱 동작을 기반으로하는 여러 가지 Functions(예 : jQuery.find또는 jQuery.each)가 있습니다.

답변

그것은 당신의 브라우저가 영리하다는 것입니다. 둘 다 객체이지만 DOMElement는 특수 객체입니다. jQuery는 Javascript 객체에 DOMElements를 래핑합니다.

더 많은 디버그 정보를 얻으려면 Firefox 용 Firebug 및 Chrome의 내장 검사기 (Firebug와 매우 유사)와 같은 디버깅 도구를 살펴 보는 것이 좋습니다.

답변

언급 한 것 외에도 jquery-object의 설명에 따라 jQuery 객체를 가져 오는 이유에 대해 추가하고 싶습니다.

  • 적합성

요소 메서드의 구현은 브라우저 공급 업체 및 버전에 따라 다릅니다.

예를 들어 innerHTML요소 집합 은 대부분의 Internet Explorer 버전에서 작동하지 않을 수 있습니다.

innerHTML을 jQuery 방식으로 설정할 수 있으며 jQuery는 브라우저의 차이점을 숨기는 데 도움이됩니다. 

// Setting the inner HTML with jQuery.

var target = document.getElementById( "target" );

$( target ).html( "<td>Hello <b>World</b>!</td>" );
  • 편의

jQuery는 개발자의 원활한 경험을 위해 jQuery 객체에 바인딩 된 메소드 목록을 제공합니다 . http://api.jquery.com/ 에서 일부 메소드를 확인하십시오 . 웹 사이트는 또한 일반적인 DOM 조작을 제공합니다 . 두 가지 방식으로 요소 newElement뒤에 저장된 요소를 삽입하는 방법을 살펴 보겠습니다 target.

DOM 방식,

// Inserting a new element after another with the native DOM API.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

target.parentNode.insertBefore( newElement, target.nextSibling );

jQuery 방식,

// Inserting a new element after another with jQuery.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

$( target ).after( newElement );

이것이 보충제가되기를 바랍니다.

답변