jQuery DOM Traversal의 해설

Question

DOM traversal을 말할 때 jQuery 워드 프로세서를 완전히 이해하고 있는지 확신 할 수 없습니다. 래퍼 객체에서 DOM 사본을 가로 지르는 것은 실제로 의미합니까? .get()과 .next()와 같은 메소드를 사용하는 것은 실제로 DOM의 복사본을 가로 지르는 반면 요소를 선택할 때 실제 탐색이 수행되는 것처럼 보입니다. 이것에 맞습니까, 아니면 뭔가를 놓쳤습니까?

미리 감사드립니다.

Answer 1

jQuery 함수는 객체를 반환합니다. 숫자 값이 인 숫자 속성이 있습니다.은 DOM 요소가 아니라 복사본입니다.

<p id="p0">p0</p> 
<p id="p1">p1</p> 

<script> 
var paragraphs = $('p'); 
</script> 

단락이 페이지에 대한 참조 값 아이디 P0와 P의 요소에 대한 참조는 '0'속성을 갖는 개체, 및 '1'로 등록 될 것이다 그래서 다음 주어진 id가 p1 인 요소. 당신은 사용하여 첫 번째 페이지를 참조 할 수 있습니다 :

paragraphs['0']; 

jQuery를 사용하면 반복 한 후, 객체의 속성으로 요소를 "수집"하는 선택 (또는 여러 선택기)를 사용할 수 있다는 점에서 "DOM을 가로 지르는 '에 도움 해당 개체의 숫자 속성 및 그 개체로 무언가를하십시오. 그래서 위의 페이지 요소에 클래스를 추가 할 수있다 :

이

paragraphs.each(function(i,el){$(el).addClass('newClass')}) 

일반 자바 스크립트에서 이에 해당 될 것이다 :

var paragraphs = document.getElementsByTagName('p'); 
var i = paragraphs.length; 
while (i--) { 
    myLib.addClass(paragraphs[i], 'newClass'); 
} 

을 myLib.addClass가 클래스를 추가하는 간단한 함수 인 경우 className 속성 addClass 기능이 조금 더 똑똑 경우 그래서 배열을 받아 들일 수있는 (또는 배열과 같은 객체) 요소 참조는 다음 POJS 버전은 다음과 같습니다

myLib.addClass(document.getElementsByTagName('p'), 'newClass'); 

그래서 구축 해당 임시 "DOM 탐색" 능력은 특별히 어렵지 않습니다.