@makecode/dom-manager

@makecode/dom-manager

가벼운 DOM 조작 라이브러리로, jQuery에서 영감을 받아 사용하기 쉬운 API를 제공합니다. DOM 요소와 상호작용하고 수정할 수 있습니다.

설치

npm을 통해 패키지를 설치하세요:

npm install @makecode/dom-manager

사용법

라이브러리를 임포트하고 프로젝트에서 사용하세요:

import $ from '@makecode/dom-manager';

// DOM 선택
const dom = $('body');

// 속성 조작
dom.attr({ 'data-test': 'value' }); // 속성 추가
console.log(dom.attr('data-test')); // 속성 가져오기

// 클래스 조작
dom.addClass('new-class');
console.log(dom.getClass()); // 'new-class'

dom.removeClass('new-class');
console.log(dom.getClass()); // ''

dom.toggleClass('toggle-class');

// 스타일 조작
dom.css({ color: 'red' }); // 스타일 설정
console.log(dom.css('color')); // 스타일 가져오기

// DOM 탐색
console.log(dom.next()); // 다음 형제 요소
console.log(dom.prev()); // 이전 형제 요소
console.log(dom.closest('div')); // 가장 가까운 상위 div 요소

// 삽입 및 교체
const newElement = $('<div>').attr({ id: 'new-div', class: 'example-class' });
dom.append(newElement); // 자식 요소로 추가
dom.prepend(newElement); // 첫 번째 자식 요소로 추가
dom.before(newElement); // 이전에 추가
dom.after(newElement); // 이후에 추가
dom.replaceWith(newElement); // 현재 요소 교체

// 데이터 속성
dom.data({ 'custom-attr': 'value' });
console.log(dom.data('custom-attr')); // 'value'

// 스크롤 가능한 부모 요소 찾기
console.log(dom.scrollParent());

// 요소 포함 여부 확인
console.log(dom.contains(newElement)); // true

// 가시성 확인
console.log(dom.isVisible()); // 요소가 보이는지 확인

// 동일한 노드인지 확인
const isEqual = dom.isEqualNode($('body'));
console.log(isEqual);

// 조건 확인
console.log(dom.is('.example-class')); // true/false

주요 기능

• 속성 조작 (attr, removeAttr, hasAttr)
• 클래스 조작 (addClass, removeClass, toggleClass, hasClass)
• 스타일 조작 (css)
• DOM 탐색 (next, prev, closest)
• DOM 삽입 및 교체 (prepend, append, before, after, replaceWith)
• 데이터 속성 관리 (data)
• 스크롤 부모 요소 탐색 (scrollParent)
• 노드 비교 (isEqualNode)
• 조건 확인 (is)
• 요소 가시성 확인 (isVisible)

브라우저 호환성

• 최신 브라우저: Chrome, Edge, Firefox, Safari
• Internet Explorer: IE11 이상

이 라이브러리는 dataset, classList, matches와 같은 최신 JavaScript API를 사용합니다. 따라서 오래된 브라우저에서는 이러한 기능을 지원하기 위해 폴리필을 포함해야 합니다.

라이선스

MIT