바닐라 JavaScript의 DOM 조작의 기본 (jQuery 없음)

이 기사는 현대 JavaScript

선집의 일부인 Vanilla JavaScript의 DOM 조작 능력을 탐구하여 jQuery에 대한 강력한 대안임을 보여줍니다. Sitepoint Premium을 통해 완전한 선집에 액세스하십시오 jQuery는 종종 DOM 조작을위한 것이지만 바닐라 JavaScript는 효율적인 기본 방법을 제공합니다. 이 기사는 주요 DOM 조작 작업과 같은 주요 DOM 조작 작업을 다룹니다. DOM 쿼리 및 수정, 클래스 및 속성 관리, 이벤트 처리 및 애니메이션. 마지막으로, 가벼운 맞춤형 DOM 라이브러리를 구축 할 것입니다.

키 테이크 아웃 :

바닐라 JavaScript는 강력한 DOM 조작 도구를 제공합니다. 특히 IE 지원 감소와 관련이 있습니다.

및

는 효율적인 요소 선택을 제공합니다. 전자는 첫 경기를 반환하고 후자는 모든 경기를 노드리스트로 반환합니다. DOM 대 HTML 속성 조작의 성능 영향을 이해하는 메소드 및

를 사용하여 요소 클래스 및 속성을 직접 수정하십시오. 이벤트 처리에 를 사용하여 단일 요소에서 다양한 유형의 여러 리스너를 가능하게하여 보다 더 많은 유연성을 제공합니다. 반복적 인 DOM 작업을 처리하기 위해 도우미 기능 또는 미니 라이브러리를 만들어 성능 및 코드 선명도를 향상시켜 기본 JavaScript를 사용하여 jQuery의 편의를 복제합니다.

dom 조작 : dom

쿼리 (참고 :이 기사는 바닐라 돔 API에 대한 높은 수준의 개요를 제공합니다. 포괄적 인 세부 사항은 Mozilla Developer Network를 참조하십시오.)
• CSS Selectors와 함께 사용하여 를 대상 요소 :
이것은 첫 번째 일치 요소를 선택합니다. 요소가 선택기와 일치하는지 확인합니다
• 모든 일치하는 요소를 검색합니다 .querySelector() 부모 요소 내에서 쿼리는 성능을 향상시킵니다 .querySelectorAll() 와 같은 메소드의 라이브 컬렉션과 달리 정적 노드리스트를 반환합니다. 이것은 성능에 영향을 미치며 명시적인 반복이 필요합니다
노드리스트와 협력
• .classList .setAttribute() 배열이 아닌 노드리스트를 반환합니다. 표준 배열 방법을 위해 배열로 변환하십시오 :

  <code class="language-javascript">const myElement = document.querySelector('#foo > div.bar');</code>

  ,

  , 등과 같은 Nodelist 속성은 관련 노드에 대한 편리한 액세스를 제공합니다. 에는 요소뿐만 아니라 모든 노드 유형이 포함되어 있습니다. 노드 유형을 확인하려면 또는 children를 사용하십시오 클래스 및 속성 수정 firstElementChild nextElementSibling childNodes nodeType 효율적인 클래스 조작을 위해 instanceof 방법을 사용하십시오

  요소 속성에 직접 액세스하고 수정하십시오 :

  , 및 및

  는 HTML 속성을 직접 수정하여 브라우저를 트리거합니다. DOM 속성에 상당한 속성이없는 속성에 주로 사용하거나 복제와 같은 작업에서 변경을 지속시킬 때 이러한 속성을 사용하십시오. CSS 스타일 추가

  낙타 캐스트 속성 이름을 사용하여 스타일을 적용하십시오 .classList

  계산 된 스타일 값을 검색합니다 :

  <code class="language-javascript">myElement.matches('div.bar') === true;</code>

  dom 수정

  요소 조작에는 ,

  <code class="language-javascript">const myElements = document.querySelectorAll('.bar');</code>

  및

  를 사용하십시오. 사본을 만듭니다. 깊은 복제에 부울 주장을 사용하십시오. 와 .getAttribute(). 요소 속성 : innerhtml 및 textContent .setAttribute() 및 .removeAttribute() 각각 HTML 및 일반 텍스트 내용을 관리합니다.

  수정 컨텐츠를 완전히 대체합니다.

  를 사용하는 것은 개별 노드를 추가하는 것보다 덜 효율적입니다. 를 사용하여 여러 추가 기능을 최적화하십시오 이벤트 듣기

  유연성 및 여러 리스너를 위해 이벤트 속성 (예 : )에 직접 할당하는 것을 선호합니다. 트리거 된 요소에 액세스하려면

  를 사용하십시오. 기본 조치를 방지합니다. 는 이벤트 버블 링을 중지합니다.

  <code class="language-javascript">const myChildElement = myElement.querySelector('input[type="submit"]');</code>

  의 선택적 세 번째 인수는 구성 옵션 (,

  , )을 제공합니다. 이벤트 대표단은 효율성을 향상시키고 동적으로 추가 된 요소를 처리합니다 애니메이션 .window.getComputedStyle()

  <code class="language-javascript">Array.from(myElements).forEach(doSomethingWithEachElement);</code>

  는 부드러운 애니메이션에

  를 사용하여 레이아웃 스래싱을 ​​피하십시오 자신의 도우미 방법을 쓰십시오

  사용자 정의 도우미 기능을 만들어 DOM 조작을 간소화하고 jQuery의 편의성을 반영합니다. 이 예제는 기본 사용자 정의 함수를 보여줍니다 :

  이것은 바닐라 JavaScript의 이점을 유지하면서 더 간결한 코드를 허용합니다. 결론 appendChild() insertBefore() 바닐라 JavaScript는 강력한 DOM 조작 기능을 제공하므로 종종 외부 라이브러리가 필요하지 않습니다. 일부 측면에는 jQuery보다 더 많은 장황 코드가 필요할 수 있지만 사용자 정의 도우미 기능을 작성하면 이러한 격차를 해소 할 수있어 효율적이고 깨끗한 DOM 조작이 가능합니다. 선택은 프로젝트 요구와 개발자 선호도에 따라 다릅니다

  (FAQS 섹션은 간결하게 생략되었지만 입력에 제공된 정보는 이미 위에서 덮여 있습니다.)

위 내용은 바닐라 JavaScript의 DOM 조작의 기본 (jQuery 없음)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!