![JavaScript 대 JQuery HTML 컬렉션]()
htmlcollection 객체는 document.getElementsByTagName에서 반환됩니다
, document.getElementsByName 및 Document.GetElementsByClassName 메소드
(모든 브라우저에서 지원되지 않음) . 피상적으로, 길이의 속성을 가지고 있기 때문에 배열과 유사하며 [index]에 의해 요소에 액세스 할 수 있습니다. 그러나 그들은 배열이 아닙니다. push (), slice () 및 sort ()와 같은 메소드는 지원되지 않습니다.
다음 HTML 문서를 고려하십시오.
getElementsByTagName 및 jQuery 선택기를 사용하여 모든 단락 노드를 잡아 봅시다.
둘 다 동일한 노드를 반환하여 수집 길이는 3입니다.
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
로그인 후 복사
이제 문서에 다른 단락 요소를 추가하고 컬렉션을 다시 살펴 보겠습니다.
var pCollection = document.getElementsByTagName("p");
var pQuery = $("p");
console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);
로그인 후 복사
결과 :
pCollection.length: 3
pQuery.length: 3
로그인 후 복사
htmlcollection 객체는
// add new paragraph
var newp = document.createElement("p");
newp.appendChild(document.createTextNode("Paragraph 4"));
document.body.appendChild(newp);
//
// display length
console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);
로그인 후 복사
live
pCollection.length: 4
pQuery.length: 3
로그인 후 복사
입니다. 기본 문서가 변경 될 때마다 자동으로 업데이트됩니다. jQuery 및 대부분의 기타 JavaScript 라이브러리는 Document.GetEmentsByTagName ()과 같은 메소드를 사용하지만 결과 노드를 실제 배열로 복사합니다. 따라서 당시 문서 상태에 대한 쿼리입니다. 업데이트되지 않습니다.
두 방법 모두에는 장점과 단점이 있습니다. 예를 들어, 다음 코드는
요소가 추가되면 HtmlCollection 길이가 증가하기 때문에 무한 루프를 유발합니다.
즉, 더 빠르고 네이티브 라이브 htmlcollection이 정적 jQuery 노드의 정적 모음보다 유용하거나 동일한 선택을 반복적으로 수행하는 상황이있을 수 있습니다. 다행히도, 우리는 컬렉션을 조작하려고 할 때 jQuery에 전달할 수 있습니다 (예 :
JQuery 및 기타 라이브러리는 개발 노력을 줄일 수 있지만 추가 파일 요청을 발생시키지 않고 오버 헤드를 처리하지 않고도 일반 이전 JavaScript로보다 효율적인 코드를 작성할 수 있는지 항상 확인하십시오.
JavaScript vs JQuery HTML 컬렉션에 대한 자주 묻는 질문
HTML 컬렉션을 다룰 때 JavaScript와 JQuery의 주요 차이점은 무엇입니까?
var pCollection = document.getElementsByTagName("p");
for (var i = 0; i < pCollection.length; i++) {
document.body.appendChild(pCollection[i].cloneNode(true));
}
로그인 후 복사
var pCollection = document.getElementsByTagName("p");
// ... add nodes, do work, etc ...
$(pCollection).addClass("myclass");
로그인 후 복사
JavaScript에서는 array.from () 메소드 또는 스프레드 연산자를 사용하여 HTML 컬렉션을 배열로 변환 할 수 있습니다. 다음은 array.from ()을 사용하는 예입니다. jQuery의 HTML 컬렉션?
jQuery에서 .Each () 메소드를 사용하여 HTML 컬렉션을 반복 할 수 있습니다. 예는 다음과 같습니다. $ ( '. example'). 각 (함수 (index, element) { console.log (index, element);
javaScript 방법에 의해 직접 jquery 메소드를 사용할 수 있습니까? JavaScript 방법으로 반환 된 HTML 컬렉션의 메소드. JavaScript 메소드는 HTML 컬렉션을 반환하고 jQuery 메소드는 jQuery 객체를 반환하기 때문입니다. 그러나 jQuery 함수 $ ()를 사용하여 HTML 컬렉션을 jQuery 객체로 변환 할 수 있습니다. JavaScript와 JQuery에서 배열에서 요소에 액세스하는 방법과 유사하게 브래킷 표기법을 사용하여 HTML 컬렉션의 개별 요소에 액세스 할 수 있습니다. 예를 들어, 컬렉션의 첫 번째 요소에 액세스하려면 컬렉션 [0].
HTML 컬렉션에서 요소를 수정할 수 있습니까?
예, JavaScript와 JQuery의 HTML 컬렉션에서 요소를 수정할 수 있습니다. JavaScript에서는 요소의 속성을 직접 수정할 수 있지만 jQuery에서 .css (), .attr () 및 .html ()와 같은 메소드를 사용하여 요소를 수정할 수 있습니다.
html 컬렉션에서 필터 요소를 필터링 할 수 있습니까? 수집. javaScript에서는 컬렉션을 배열로 변환 한 다음 .filter () 메소드를 사용할 수 있습니다.
HTML 컬렉션에서 배열 메소드를 사용할 수 있습니까? 아니요, 배열이 아니기 때문에 HTML 컬렉션에서 배열 메소드를 직접 사용할 수 없습니다. 그러나 배열 () 또는 스프레드 연산자를 사용하여 컬렉션을 배열로 변환 한 다음 배열 메소드를 사용해야합니다.
HTML 컬렉션에 요소를 추가 할 수 있습니까?
문서가 변경 될 때 자동으로 업데이트되는 라이브 컬렉션이므로 HTML 컬렉션에 요소를 직접 추가 할 수 없습니다. 그러나 문서에 요소를 추가 할 수 있으며 선택기와 일치하면 컬렉션에 자동으로 포함됩니다.
. html 컬렉션에서 .map () 메소드를 사용할 수 있습니까? 아니요, 배열이 아니기 때문에 HTML 컬렉션에서 .map () 메소드를 직접 사용할 수 없습니다. 그러나 array.from () 또는 스프레드 연산자를 사용하여 컬렉션을 배열로 변환 한 다음 .map () 메소드를 사용할 수 있습니다.
위 내용은 JavaScript 대 JQuery HTML 컬렉션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
