바닐라 JavaScript 유틸리티 함수로 DOM 조작 단순화

소개

jQuery를 사용해 본 적이 있다면 DOM 요소를 선택하고 조작하는 것이 얼마나 편리한지 알 것입니다. 하지만 전체 jQuery 라이브러리를 가져오지 않고 바닐라 JavaScript에서 유사한 기능을 원한다면 어떻게 될까요? 이 기사에서는 순수 JavaScript를 사용하여 요소 선택, 클래스 추가 등 jQuery의 핵심 기능 중 일부를 모방하는 단순화된 유틸리티 함수를 생성하는 방법을 살펴보겠습니다.

깨끗하고 연결 가능한 방식으로 DOM 조작을 가능하게 하는 간결한 유틸리티 함수를 분석해 보겠습니다. 차근차근 쌓아가며 각 부분을 설명드리겠습니다.

코드

const $ = function (selector = null) {
    return new class {
        constructor(selector) {
            if (selector) {
                // Check if selector is a single DOM element (nodeType present)
                if (selector.nodeType) {
                    this.nodes = [selector];  // Convert the element into an array
                } 
                // Check if selector is a NodeList
                else if (NodeList.prototype.isPrototypeOf(selector)) {
                    this.nodes = selector;  // Use the NodeList as-is
                } 
                // Otherwise assume it's a CSS selector string
                else {
                    this.nodes = document.querySelectorAll(selector);
                }
                // Store the first element in the variable 'n'
                this.n = this.nodes[0];
            }
        }

        each(callback) {
            this.nodes.forEach(node => callback(node));
            return this;  // Return 'this' for method chaining
        }

        addClass(classNames) {
            return this.each(node => {
                const classes = classNames.split(",").map(className => className.trim());  // Split and trim classes
                node.classList.add(...classes);  // Add the classes to the element
            });
        }
    }(selector);
}

설명

1. $ 함수 만들기:

   const $ = function (selector = null) {

$ 함수는 jQuery의 $ 선택기를 모방한 단순화된 유틸리티입니다. CSS 선택기 문자열, 단일 DOM 요소 또는 NodeList가 될 수 있는 선택기를 인수로 허용합니다.

1. 익명 클래스 및 생성자:

   return new class {
       constructor(selector) {
           if (selector) {

이 함수는 익명 클래스의 인스턴스를 반환합니다. 생성자 내부에서는 선택자가 어떤 인자인지 확인하고 그에 맞게 처리합니다.

1. 선택기 처리:

   if (selector.nodeType) {
       this.nodes = [selector];  // Convert the element into an array
   } else if (NodeList.prototype.isPrototypeOf(selector)) {
       this.nodes = selector;  // Use the NodeList as-is
   } else {
       this.nodes = document.querySelectorAll(selector);  // Handle CSS selector strings
   }
   this.n = this.nodes[0];  // Store the first element

• selector가 DOM 요소(nodeType 포함)인 경우 일관된 처리를 위해 배열로 래핑됩니다.
• selector가 이미 NodeList인 경우 직접 사용합니다.
• 문자열인 경우 CSS 선택기라고 가정하고 querySelectorAll을 사용하여 일치하는 DOM 요소를 선택합니다.

유형을 결정한 후 빠른 액세스를 위해 첫 번째로 선택한 요소가 this.n에 저장됩니다.

1. 각 방법:

   each(callback) {
       this.nodes.forEach(node => callback(node));
       return this;  // Allows method chaining
   }

각 메소드는 this.nodes에서 선택한 요소를 반복하고 제공된 콜백 함수를 각 요소에 적용합니다. 여러 메소드를 함께 연결할 수 있도록 이를 반환합니다.

1. addClass 메소드:

   addClass(classNames) {
       return this.each(node => {
           const classes = classNames.split(",").map(className => className.trim());  // Split and trim class names
           node.classList.add(...classes);  // Add the classes to each element
       });
   }

addClass 메소드를 사용하면 선택한 요소에 하나 이상의 클래스를 추가할 수 있습니다. 쉼표로 구분된 클래스 이름 문자열을 가져와 분할하고 추가 공백을 제거한 다음 classList.add를 사용하여 각 클래스를 요소에 적용합니다.

사용예

이 유틸리티를 사용하면 jQuery를 사용할 때와 마찬가지로 간단하고 읽기 쉬운 방식으로 DOM을 조작할 수 있습니다.

// Select all elements with the class 'my-element' and add 'new-class' to them
$('.my-element').addClass('new-class');

// You can also chain methods, for example, adding multiple classes
$('.my-element').addClass('class-one, class-two');

결론

이 유틸리티 함수는 바닐라 JavaScript의 세계에 jQuery의 우아함을 더해 외부 라이브러리에 의존하지 않고도 DOM 조작을 더욱 직관적이고 읽기 쉽게 만듭니다. 또한 가벼우며 필요에 따라 더 많은 메서드를 사용하여 쉽게 확장할 수 있습니다. jQuery만큼 강력하거나 포괄적이지는 않지만 깔끔하고 재사용 가능한 방식으로 많은 일상 작업을 처리합니다.

removeClass, ToggleClass 또는 CSS와 같은 더 많은 메소드를 사용하여 이 유틸리티를 자유롭게 확장하세요. 이렇게 하면 특정 요구 사항에 맞는 나만의 미니 프레임워크를 갖게 됩니다.

---

이 내용이 도움이 되었거나 개선을 위한 제안 사항이 있으면 아래에 의견을 남겨주세요. DOM 조작 과정을 함께 단순화해 봅시다!

위 내용은 바닐라 JavaScript 유틸리티 함수로 DOM 조작 단순화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!