DOM을 운영하는 네이티브 JS와 jQuery의 비교 요약

DOM을 운영하는 네이티브 JS와 jQuery에 대한 몇 가지 비교 및 ​​요약입니다. 모든 사람의 공부나 업무에 도움이 될 것이라고 믿습니다. 함께 살펴보겠습니다.

1. 요소 노드 생성

1.1 네이티브 JS로 요소 노드 생성

document.createElement("p");

1.2 jQuery로 요소 노드 생성

$(&#39;<p></p>&#39;);`

2. 텍스트 노드 생성 및 추가

2.1 기본 JS 텍스트 노드 만들기

document.createTextNode("Text Content");

는 일반적으로 다음과 같이 텍스트 노드 만들기 및 요소 노드 만들기와 함께 사용됩니다.

var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);

2.2 jQuery 생성 및 추가 텍스트 노드:

var $p = $(&#39;<p>Hello World.</p>&#39;);

3. 노드 복사

3.1 네이티브 JS 복사 노드:

var newEl = pEl.cloneNode(true);

참과 거짓의 차이:

1. true: 전체 '

   Hello World.< ;/p>' 노드

2. false: '

   '만 복제하고 Hello World 텍스트를 복제하지 않습니다.
   

3.2 jQuery 복사 노드

$newEl = $('#pEl').clone(true);

참고: 노드를 복제할 때 중복 ID를 피하세요

4. 노드 삽입

4.1 네이티브 JS는 하위 노드 목록 끝에 새 하위 노드를 추가합니다. >

El.appendChild(newNode);

Native JS는 노드의 기존 하위 노드 앞에 새 하위 노드를 삽입합니다.

El.insertBefore(newNode, targetNode);

4.2 jQuery에서, 네이티브 JS보다 노드를 삽입하는 방법이 더 많습니다

일치하는 요소의 하위 노드 목록 끝에 콘텐츠 추가

$(&#39;#El&#39;).append(&#39;<p>Hello World.</p>&#39;);

대상 요소의 하위 노드 목록 끝에 일치하는 요소 추가

$(&#39;<p>Hello World.</p>&#39;).appendTo(&#39;#El&#39;);

일치하는 요소의 하위 노드 목록 시작 부분에 콘텐츠 추가

$(&#39;#El&#39;).prepend(&#39;<p>Hello World.</p>&#39;);

대상 요소의 하위 노드 목록 시작 부분에 일치하는 요소 추가

$(&#39;<p>Hello World.</p>&#39;).prependTo(&#39;#El&#39;);

일치하는 요소 앞에 대상 콘텐츠 추가

$(&#39;#El&#39;).before(&#39;<p>Hello World.</p>&#39;);

대상 요소 앞에 일치 요소 추가

$(&#39;<p>Hello World.</p>&#39;).insertBefore(&#39;#El&#39;);

일치 요소 뒤에 대상 콘텐츠 추가

$(&#39;#El&#39;).after(&#39;<p>Hello World.</p>&#39;);

대상 요소에 일치 요소 추가 후

$(&#39;<p>Hello World.</p>&#39;).insertAfter(&#39;#El&#39;);

5. 노드 삭제

5.1 Native JS 삭제 노드

El.parentNode.removeChild(El);

5.2 jQuery 삭제 노드

$('#El').remove();

6. 노드 교체

6.1 기본 JS 대체 노드

El.repalceChild(newNode, oldNode);

참고: oldNode는 parentEl의 실제 하위 노드여야 합니다

6.2 jQuery 대체 노드

$(&#39;p&#39;).replaceWith(&#39;<p>Hello World.</p>&#39;);

7. 속성 설정/속성 가져오기

7.1 기본 JS 속성 설정/속성 가져오기

imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;

7.2 jQuery 속성 설정/속성 가져오기:

$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");

요약

위 내용은 이 글의 전체 내용입니다. 이 기사의 내용이 모든 사람의 공부나 업무에 도움이 되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨서 소통하세요.