DOM 관리 헬퍼
npm install @makecode/dom-manager가벼운 DOM 조작 라이브러리로, jQuery에서 영감을 받아 사용하기 쉬운 API를 제공합니다. DOM 요소와 상호작용하고 수정할 수 있습니다.
npm을 통해 패키지를 설치하세요:
``bash`
npm install @makecode/dom-manager
라이브러리를 임포트하고 프로젝트에서 사용하세요:
`javascript
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 = $('
// 데이터 속성
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
- 스타일 조작 ()next
- DOM 탐색 (, prev, closest)prepend
- DOM 삽입 및 교체 (, append, before, after, replaceWith)data
- 데이터 속성 관리 ()scrollParent
- 스크롤 부모 요소 탐색 ()isEqualNode
- 노드 비교 ()is
- 조건 확인 ()isVisible
- 요소 가시성 확인 ()
- 최신 브라우저: Chrome, Edge, Firefox, Safari
- Internet Explorer: IE11 이상
이 라이브러리는 dataset, classList, matches`와 같은 최신 JavaScript API를 사용합니다. 따라서 오래된 브라우저에서는 이러한 기능을 지원하기 위해 폴리필을 포함해야 합니다.
MIT