syn.$m

개요

syn.$m은 HandStack 웹 애플리케이션에서 DOM(Document Object Model) 조작 기능을 제공합니다. HTML 요소의 조회, 생성, 수정, 삭제 및 스타일 조작 등 다양한 DOM 관련 작업을 간편하게 수행할 수 있습니다.

주요 기능

요소 탐색 및 관계 조회

자식 요소 조회

childNodes(el) 지정된 요소의 모든 자식 노드를 가져옵니다.

// 모든 자식 노드 조회 (텍스트 노드 포함)
var childNodes = syn.$m.childNodes(document.body);
console.log('자식 노드 수:', childNodes.length);

children(el) 지정된 요소의 자식 Element만 가져옵니다.

// Element 자식만 조회
var children = syn.$m.children('myContainer');
console.log('자식 Element 수:', children.length);

firstChild(el) / lastChild(el) 첫 번째 또는 마지막 자식 노드를 가져옵니다.

var firstChild = syn.$m.firstChild('myContainer');
var lastChild = syn.$m.lastChild('myContainer');
console.log('첫 자식:', firstChild?.nodeName);
console.log('마지막 자식:', lastChild?.nodeName);

firstElementChild(el) / lastElementChild(el) 첫 번째 또는 마지막 자식 Element를 가져옵니다.

var firstElement = syn.$m.firstElementChild('myContainer');
var lastElement = syn.$m.lastElementChild('myContainer');

형제 요소 조회

nextSibling(el) / previousSibling(el) 다음 또는 이전 형제 노드를 가져옵니다.

var nextNode = syn.$m.nextSibling('myElement');
var prevNode = syn.$m.previousSibling('myElement');

nextElementSibling(el) / previousElementSibling(el) 다음 또는 이전 형제 Element를 가져옵니다.

var nextElement = syn.$m.nextElementSibling('myElement');
var prevElement = syn.$m.previousElementSibling('myElement');

siblings(el) 모든 형제 요소를 가져옵니다.

var siblings = syn.$m.siblings('myElement');
siblings.forEach(sibling => {
    console.log('형제 요소:', sibling.tagName);
});

부모 요소 조회

parentNode(el) / parentElement(el) 부모 노드 또는 부모 Element를 가져옵니다.

var parentNode = syn.$m.parentNode('myElement');
var parentElement = syn.$m.parentElement('myElement');

parent(el, id?) 부모 요소를 가져오거나 특정 ID를 가진 상위 요소를 찾습니다.

// 직접 부모 요소
var directParent = syn.$m.parent('myElement');

// 특정 ID를 가진 상위 요소 찾기
var specificParent = syn.$m.parent('myElement', 'targetParentId');

콘텐츠 조작

값 및 텍스트 조작

value(el, value?) 입력 요소의 값을 설정하거나 가져옵니다.

// 값 설정
syn.$m.value('myInput', 'Hello World');

// 값 가져오기
var inputValue = syn.$m.value('myInput');
console.log('입력값:', inputValue);

textContent(el, value?) 요소의 텍스트 콘텐츠를 설정하거나 가져옵니다.

// 텍스트 설정
syn.$m.textContent('myDiv', 'Hello World');

// 텍스트 가져오기
var text = syn.$m.textContent('myDiv');

innerText(el, value?) 요소의 표시되는 텍스트를 설정하거나 가져옵니다.

syn.$m.innerText('myElement', 'Visible Text');
var visibleText = syn.$m.innerText('myElement');

innerHTML(el, value?) 요소의 HTML 콘텐츠를 설정하거나 가져옵니다.

// HTML 설정
syn.$m.innerHTML('myDiv', '<b>Bold Text</b><i>Italic Text</i>');

// HTML 가져오기
var htmlContent = syn.$m.innerHTML('myDiv');

outerHTML(el) 요소 자체를 포함한 HTML을 가져옵니다.

var outerHTML = syn.$m.outerHTML('myElement');
console.log('전체 HTML:', outerHTML);

속성 및 클래스 조작

HTML 속성 조작

getAttribute(el, prop) / setAttribute(el, prop, val) HTML 속성을 가져오거나 설정합니다.

// 속성 설정
syn.$m.setAttribute('myElement', 'data-value', '123');

// 속성 가져오기
var dataValue = syn.$m.getAttribute('myElement', 'data-value');
console.log('데이터 값:', dataValue);

removeAttribute(el, prop) HTML 속성을 제거합니다.

syn.$m.removeAttribute('myElement', 'data-temp');

CSS 클래스 조작

addClass(el, css) / removeClass(el, css) CSS 클래스를 추가하거나 제거합니다.

// 클래스 추가
syn.$m.addClass('myElement', 'active highlight');

// 클래스 제거
syn.$m.removeClass('myElement', 'highlight');

// 모든 클래스 제거
syn.$m.removeClass('myElement');

hasClass(el, css) 특정 클래스를 가지고 있는지 확인합니다.

var hasActiveClass = syn.$m.hasClass('myElement', 'active');
if (hasActiveClass) {
    console.log('활성 상태입니다');
}

toggleClass(el, css) 클래스를 토글합니다.

// 클래스가 있으면 제거, 없으면 추가
syn.$m.toggleClass('myElement', 'expanded');

className(el) 요소의 전체 클래스명을 가져옵니다.

var allClasses = syn.$m.className('myElement');
console.log('모든 클래스:', allClasses);

스타일 조작

CSS 스타일 설정

setStyle(el, prop, val) 단일 CSS 속성을 설정합니다.

syn.$m.setStyle('myElement', 'color', 'red');
syn.$m.setStyle('myElement', 'fontSize', '18px');

addStyle(el, styles) 여러 CSS 속성을 한 번에 설정합니다.

syn.$m.addStyle('myElement', {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
    borderRadius: '5px'
});

addCssText(el, cssText) CSS 텍스트를 추가합니다.

syn.$m.addCssText('myElement', 'background-color: lightblue; border: 1px solid navy;');

getStyle(el, prop) 요소의 인라인 스타일 값을 가져옵니다.

var color = syn.$m.getStyle('myElement', 'color');
console.log('색상:', color);

getComputedStyle(el, prop) 계산된 스타일 값을 가져옵니다.

var computedColor = syn.$m.getComputedStyle('myElement', 'color');
console.log('계산된 색상:', computedColor);

요소 생성 및 조작

요소 생성

create(options) 새로운 HTML 요소를 생성합니다.

var newElement = syn.$m.create({
    tag: 'div',
    id: 'newDiv',
    className: 'custom-div',
    styles: {
        width: '200px',
        height: '100px',
        backgroundColor: '#f0f0f0'
    },
    attributes: {
        'data-type': 'custom',
        'role': 'region'
    },
    text: '새로운 요소입니다'
});

document.body.appendChild(newElement);

append(baseEl, tag, elID, options) 기존 요소에 새로운 자식 요소를 추가합니다.

syn.$m.append('container', 'button', 'newButton', {
    text: '클릭하세요',
    classNames: 'btn btn-primary',
    styles: {
        margin: '5px'
    }
});

요소 복사 및 삽입

copy(el) 요소를 복사합니다.

var originalElement = syn.$l.get('originalDiv');
var copiedElement = syn.$m.copy(originalElement);
document.body.appendChild(copiedElement);

appendChild(el, node) 자식 요소를 추가합니다.

var listItem = document.createElement('li');
listItem.textContent = '새 항목';
syn.$m.appendChild('myList', listItem);

prepend(el, baseEl) 요소를 첫 번째 자식으로 삽입합니다.

var firstItem = syn.$m.create({
    tag: 'div',
    text: '첫 번째 항목'
});
syn.$m.prepend(firstItem, 'container');

insertAfter(el, targetEL) 대상 요소 뒤에 삽입합니다.

var newElement = syn.$m.create({
    tag: 'p',
    text: '삽입된 단락'
});
syn.$m.insertAfter(newElement, 'targetParagraph');

표시 및 상태 제어

표시/숨김 제어

display(el, isShow) 요소를 표시하거나 숨깁니다.

// 요소 표시
syn.$m.display('myElement', true);

// 요소 숨김
syn.$m.display('myElement', false);

toggleDisplay(el) 요소의 표시 상태를 토글합니다.

syn.$m.toggleDisplay('myElement');

hasHidden(el) 요소가 숨겨졌는지 확인합니다.

var isHidden = syn.$m.hasHidden('myElement');
if (isHidden) {
    console.log('요소가 숨겨져 있습니다');
}

상태 설정

setActive(el, value) 요소에 'active' 클래스를 설정하거나 제거합니다.

syn.$m.setActive('myButton', true);  // active 클래스 추가
syn.$m.setActive('myButton', false); // active 클래스 제거

setSelected(el, value, multiple) 선택 상태를 설정합니다.

// 단일 선택
syn.$m.setSelected('option1', true);

// 다중 선택 허용
syn.$m.setSelected('option2', true, true);

setChecked(el, value, multiple) 체크 상태를 설정합니다.

// 체크박스/라디오 버튼 체크
syn.$m.setChecked('checkbox1', true);

// 같은 이름의 다른 라디오 버튼은 해제하지 않고 체크
syn.$m.setChecked('radio1', true, true);

요소 제거 및 유틸리티

remove(el) 요소를 제거합니다.

syn.$m.remove('elementToRemove');

hasChild(el) 요소에 자식이 있는지 확인합니다.

var hasChildren = syn.$m.hasChild('myContainer');
if (hasChildren) {
    console.log('자식 요소가 있습니다');
}

each(array, handler) 배열의 각 요소에 대해 함수를 실행합니다.

var elements = syn.$m.children('container');
syn.$m.each(elements, (element, index) => {
    console.log(`${index}번째 요소:`, element.tagName);
    syn.$m.addClass(element, 'processed');
});

실전 활용 예제

1. 동적 폼 생성

function createDynamicForm() {
    // 폼 컨테이너 생성
    var formContainer = syn.$m.create({
        tag: 'div',
        id: 'dynamicForm',
        className: 'form-container',
        styles: {
            padding: '20px',
            border: '1px solid #ccc',
            borderRadius: '5px'
        }
    });
    
    // 입력 필드 생성
    var nameInput = syn.$m.create({
        tag: 'input',
        id: 'userName',
        attributes: {
            type: 'text',
            placeholder: '이름을 입력하세요'
        },
        className: 'form-control mb-3'
    });
    
    // 레이블 생성
    var nameLabel = syn.$m.create({
        tag: 'label',
        attributes: { for: 'userName' },
        text: '이름:',
        className: 'form-label'
    });
    
    // 제출 버튼 생성
    var submitBtn = syn.$m.create({
        tag: 'button',
        id: 'submitBtn',
        text: '제출',
        className: 'btn btn-primary',
        attributes: { type: 'submit' }
    });
    
    // 요소들을 폼에 추가
    syn.$m.appendChild(formContainer, nameLabel);
    syn.$m.appendChild(formContainer, nameInput);
    syn.$m.appendChild(formContainer, submitBtn);
    
    // 페이지에 폼 추가
    document.body.appendChild(formContainer);
    
    return formContainer;
}

// 사용 예제
var form = createDynamicForm();

2. 테이블 데이터 동적 업데이트

function updateTableData(tableId, data) {
    var table = syn.$l.get(tableId);
    var tbody = syn.$m.querySelector('tbody', table);
    
    // 기존 행 제거
    syn.$m.innerHTML(tbody, '');
    
    // 새 데이터로 행 생성
    data.forEach((rowData, index) => {
        var row = syn.$m.create({ tag: 'tr' });
        
        // 각 셀 생성
        Object.values(rowData).forEach(cellData => {
            var cell = syn.$m.create({
                tag: 'td',
                text: cellData,
                className: 'table-cell'
            });
            syn.$m.appendChild(row, cell);
        });
        
        // 홀짝 행 스타일 적용
        if (index % 2 === 0) {
            syn.$m.addClass(row, 'even-row');
        }
        
        syn.$m.appendChild(tbody, row);
    });
}

// 사용 예제
var sampleData = [
    { name: '홍길동', age: 30, city: '서울' },
    { name: '김철수', age: 25, city: '부산' },
    { name: '이영희', age: 28, city: '대구' }
];
updateTableData('dataTable', sampleData);

3. 모달 다이얼로그 생성

function createModal(title, content, options = {}) {
    // 모달 배경
    var modalBackground = syn.$m.create({
        tag: 'div',
        className: 'modal-background',
        styles: {
            position: 'fixed',
            top: '0',
            left: '0',
            width: '100%',
            height: '100%',
            backgroundColor: 'rgba(0,0,0,0.5)',
            zIndex: '9999'
        }
    });
    
    // 모달 컨테이너
    var modalContainer = syn.$m.create({
        tag: 'div',
        className: 'modal-container',
        styles: {
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            backgroundColor: 'white',
            padding: '20px',
            borderRadius: '8px',
            boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
            maxWidth: '500px',
            width: '90%'
        }
    });
    
    // 제목
    var modalTitle = syn.$m.create({
        tag: 'h3',
        text: title,
        styles: {
            marginTop: '0',
            marginBottom: '15px',
            color: '#333'
        }
    });
    
    // 내용
    var modalContent = syn.$m.create({
        tag: 'div',
        html: content,
        styles: {
            marginBottom: '20px',
            lineHeight: '1.5'
        }
    });
    
    // 닫기 버튼
    var closeBtn = syn.$m.create({
        tag: 'button',
        text: '닫기',
        className: 'btn btn-secondary',
        styles: { float: 'right' }
    });
    
    // 구조 조립
    syn.$m.appendChild(modalContainer, modalTitle);
    syn.$m.appendChild(modalContainer, modalContent);
    syn.$m.appendChild(modalContainer, closeBtn);
    syn.$m.appendChild(modalBackground, modalContainer);
    
    // 이벤트 설정
    syn.$l.addEvent(closeBtn, 'click', () => {
        syn.$m.remove(modalBackground);
    });
    
    syn.$l.addEvent(modalBackground, 'click', (e) => {
        if (e.target === modalBackground) {
            syn.$m.remove(modalBackground);
        }
    });
    
    // 페이지에 추가
    document.body.appendChild(modalBackground);
    
    return modalBackground;
}

// 사용 예제
createModal('알림', '작업이 완료되었습니다.<br>새로고침하시겠습니까?');

4. 드래그 앤 드롭 리스트

function createDragDropList(containerId, items) {
    var container = syn.$l.get(containerId);
    
    items.forEach(item => {
        var listItem = syn.$m.create({
            tag: 'div',
            text: item,
            className: 'draggable-item',
            attributes: {
                draggable: 'true'
            },
            styles: {
                padding: '10px',
                margin: '5px 0',
                backgroundColor: '#f8f9fa',
                border: '1px solid #dee2e6',
                borderRadius: '4px',
                cursor: 'move'
            }
        });
        
        // 드래그 이벤트
        syn.$l.addEvent(listItem, 'dragstart', (e) => {
            syn.$m.addClass(listItem, 'dragging');
            e.dataTransfer.setData('text/plain', item);
        });
        
        syn.$l.addEvent(listItem, 'dragend', () => {
            syn.$m.removeClass(listItem, 'dragging');
        });
        
        syn.$m.appendChild(container, listItem);
    });
    
    // 컨테이너 드롭 이벤트
    syn.$l.addEvent(container, 'dragover', (e) => {
        e.preventDefault();
    });
    
    syn.$l.addEvent(container, 'drop', (e) => {
        e.preventDefault();
        var draggedItem = container.querySelector('.dragging');
        var afterElement = getDragAfterElement(container, e.clientY);
        
        if (afterElement == null) {
            syn.$m.appendChild(container, draggedItem);
        } else {
            container.insertBefore(draggedItem, afterElement);
        }
    });
}

function getDragAfterElement(container, y) {
    var draggableElements = [...container.querySelectorAll('.draggable-item:not(.dragging)')];
    
    return draggableElements.reduce((closest, child) => {
        var box = child.getBoundingClientRect();
        var offset = y - box.top - box.height / 2;
        
        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child };
        } else {
            return closest;
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element;
}

// 사용 예제
createDragDropList('sortableList', ['항목 1', '항목 2', '항목 3', '항목 4']);

주의사항

1. 메모리 누수 방지: 동적으로 생성한 요소에 이벤트를 등록한 경우, 요소 제거 시 이벤트도 함께 정리해야 합니다.
2. 성능 고려: 대량의 DOM 조작 시에는 DocumentFragment를 활용하거나 한 번에 처리하는 것이 좋습니다.
3. 브라우저 호환성: 일부 메서드는 구형 브라우저에서 지원되지 않을 수 있습니다.
4. XSS 방지: innerHTML 사용 시 사용자 입력값을 직접 사용하지 않도록 주의해야 합니다.

데모

'use strict';
let $manipulation = {
    extends: [
        'parsehtml'
    ],

    event: {
        btn_childNodes_click() {
            var childNodes = syn.$m.childNodes(document.body);
            var nodes = [];
            for (var i = 0, length = childNodes.length; i < length; i++) {
                nodes.push(childNodes[i].nodeName + '\n');
            }

            syn.$l.get('txt_childNodes').value = nodes.join('');
        },

        btn_children_click() {
            var children = syn.$m.children(document.body);
            var nodes = [];
            for (var i = 0, length = children.length; i < length; i++) {
                nodes.push(children[i].nodeName + '\n');
            }

            syn.$l.get('txt_children').value = nodes.join('');
        },

        btn_firstChild_click() {
            syn.$l.get('txt_firstChild').value = syn.$m.firstChild(document.body);
        },

        btn_firstElementChild_click() {
            syn.$l.get('txt_firstElementChild').value = syn.$m.firstElementChild(document.body);
        },

        btn_lastChild_click() {
            syn.$l.get('txt_lastChild').value = syn.$m.lastChild(document.body);
        },

        btn_lastElementChild_click() {
            syn.$l.get('txt_lastElementChild').value = syn.$m.lastElementChild(document.body);
        },

        btn_nextSibling1_click() {
            syn.$l.get('txt_nextSibling').value = '';
            syn.$l.get('txt_nextSibling').value = syn.$m.nextSibling('nextSibling_item1').nodeName;
        },

        btn_nextSibling2_click() {
            syn.$l.get('txt_nextSibling').value = '';
            syn.$l.get('txt_nextSibling').value = syn.$m.nextSibling('nextSibling_item2').nodeName;
        },

        btn_nextElementSibling1_click() {
            syn.$l.get('txt_nextElementSibling').value = '';
            syn.$l.get('txt_nextElementSibling').value = syn.$m.nextElementSibling('nextElementSibling_item1').nodeName;
        },

        btn_nextElementSibling2_click() {
            syn.$l.get('txt_nextElementSibling').value = '';
            syn.$l.get('txt_nextElementSibling').value = syn.$m.nextElementSibling('nextElementSibling_item2').nodeName;
        },

        btn_previousSibling1_click() {
            syn.$l.get('txt_previousSibling').value = '';
            syn.$l.get('txt_previousSibling').value = syn.$m.previousSibling('previousSibling_item1').nodeName;
        },

        btn_previousSibling2_click() {
            syn.$l.get('txt_previousSibling').value = '';
            syn.$l.get('txt_previousSibling').value = syn.$m.previousSibling('previousSibling_item2').nodeName;
        },

        btn_previousElementSibling1_click() {
            syn.$l.get('txt_previousElementSibling').value = '';
            syn.$l.get('txt_previousElementSibling').value = syn.$m.previousElementSibling('previousElementSibling_item1').nodeName;
        },

        btn_previousElementSibling2_click() {
            syn.$l.get('txt_previousElementSibling').value = '';
            syn.$l.get('txt_previousElementSibling').value = syn.$m.previousElementSibling('previousElementSibling_item2').nodeName;
        },

        btn_siblings_click() {
            var siblingELs = syn.$m.siblings('btn_parentNode');
            var nodes = [];
            for (var i = 0, length = siblingELs.length; i < length; i++) {
                nodes.push(siblingELs[i].nodeName + '\n');
            }

            syn.$l.get('txt_siblings').value = nodes.join('');
        },

        btn_parentNode_click() {
            syn.$l.get('txt_parentNode').value = syn.$m.parentNode(document.body).nodeName;
        },

        btn_parentElement_click() {
            syn.$l.get('txt_parentElement').value = syn.$m.parentElement(document.body).nodeName;
        },

        btn_value_click() {
            syn.$m.value('txt_value', 'hello world');
        },

        btn_textContent_click() {
            syn.$m.textContent('div_textContent', 'hello world');
        },

        btn_innerText_click() {
            syn.$m.innerText('div_innerText', 'hello world');
        },

        btn_innerHTML_click() {
            syn.$m.innerHTML('div_innerHTML', '<b style="color: red;">hello world</b>');
        },

        btn_outerHTML_click() {
            syn.$l.get('txt_outerHTML').value =syn.$m.outerHTML('div_outerHTML');
        },

        btn_className_click() {
            syn.$l.get('txt_className').value = syn.$m.className('btn_className');
        },

        btn_removeAttribute_click() {
            syn.$l.get('txt_attribute').value = '';
            syn.$m.removeAttribute('txt_attribute', 'custom1');
        },

        btn_getAttribute_click() {
            syn.$l.get('txt_attribute').value = syn.$m.getAttribute('txt_attribute', 'custom1');
        },

        btn_setAttribute_click() {
            syn.$m.setAttribute('txt_attribute', 'custom1', 'hello world');
        },

        btn_appendChild_click() {
            var el = document.createElement('LI');
            el.textContent = 'Grape';
            syn.$m.appendChild('myList', el);
        },

        btn_setStyle_click() {
            syn.$m.setStyle('div_setStyle', 'color', 'red');
        },

        btn_addStyle_click() {
            syn.$m.addStyle('div_addStyle', { backgroundColor: 'blue', color: 'white', border: '2px solid red' });
        },

        btn_addCssText_click() {
            syn.$m.addCssText('div_addCssText', 'background-color: lightblue;');
        },

        btn_getStyle_click() {
            syn.$l.get('txt_getStyle').value = syn.$m.getStyle('div_getStyle', 'border');
        },

        btn_getComputedStyle_click() {
            syn.$l.get('txt_getComputedStyle').value = syn.$m.getComputedStyle('txt_getComputedStyle', 'border');
        },

        btn_hasHidden_click() {
            syn.$l.get('txt_hasHidden').value = syn.$m.hasHidden('txt_hasHidden');
        },

        btn_addClass_click() {
            syn.$m.addClass('div_className', syn.$l.get('txt_className1').value);
        },

        btn_hasClass_click() {
            syn.$l.get('txt_className1').value = syn.$m.hasClass('div_className', syn.$l.get('txt_className1').value);
        },

        btn_toggleClass_click() {
            syn.$m.toggleClass('div_className', syn.$l.get('txt_className1').value);
        },

        btn_removeClass_click() {
            syn.$m.removeClass('div_className', syn.$l.get('txt_className1').value);
        },

        btn_append_click() {
            syn.$m.append('div_append', 'input', 'txt' + syn.$l.random(), {
                styles: {
                    display: 'block',
                    color: 'red'
                },
                classNames: 'f:32 mb-2',
                value: 'hello world',
                text: 'hello world',
                content: 'hello world',
                html: 'hello world'
            });
        },

        btn_prepend_click() {
            var value = $date.toString(new Date(), 'a');
            var divEL = syn.$m.create({
                tag: 'div',
                styles: {
                    display: 'block',
                    color: 'red'
                },
                attributes: {
                    custom1: 'custom1',
                    readonly: 'readonly'
                },
                data: {
                    data1: 'data1',
                    data2: 'data2',
                    data3: 'data3'
                },
                className: 'form-control',
                classNames: 'f:32 mb-2',
                value: value,
                text: value,
                content: value,
                html: value
            });
            syn.$m.prepend(divEL, 'div_prepend');
        },

        btn_copy_click() {
            var copyEL = syn.$m.copy('div_copy');
            syn.$l.get('txt_copy').value = copyEL.outerHTML;
            copyEL.innerHTML = '';
        },

        btn_remove_click() {
            syn.$m.remove('div_remove');
        },

        btn_hasChild_click() {
            syn.$l.get('txt_hasChild').value = syn.$m.hasChild('txt_hasChild');
        },

        btn_insertAfter_click() {
            var divEL = syn.$m.create({
                text: $date.toString(new Date(), 'a'),
            });
            syn.$m.insertAfter(divEL, 'div_insertAfter');
        },

        btn_display_click() {
            syn.$m.display('div_display', syn.$l.get('chk_display').checked);
        },

        btn_toggleDisplay_click() {
            syn.$m.toggleDisplay('div_display');
        },

        btn_parent_click() {
            syn.$l.get('txt_parent').value = syn.$m.parent('btn_parent').outerHTML;
        },

        btn_parentID_click() {
            syn.$l.get('txt_parent').value = syn.$m.parent('btn_parent', 'div_parent').outerHTML;
        },

        btn_create_click() {
            var el = syn.$m.create(JSON.parse(syn.$l.get('txt_createJson').value));
            syn.$l.get('txt_create').value = el.outerHTML;
        },

        btn_each_click() {
            var nodes = [];
            var siblingELs = syn.$m.siblings('btn_parentNode');
            syn.$m.each(siblingELs, (item, index) => {
                nodes.push(`name: ${item.nodeName}, index: ${index}` + '\n');
            });
            syn.$l.get('txt_each').value = nodes.join('');
        },

        btn_setActive_click() {
            syn.$m.setActive('div_setActive', syn.$l.get('chk_setActive').checked);
        },

        btn_setSelected_click(evt) {
            syn.$m.setSelected('opt_setSelected_Item1', true, true);
            syn.$m.setSelected('opt_setSelected_Item2', true, true);
            syn.$m.setSelected('opt_setSelected_Item3', true, true);
        },

        btn_setChecked_click(evt) {
            syn.$m.setChecked('opt_setChecked_Item1', true);
            syn.$m.setChecked('opt_setChecked_Item2', true);
            syn.$m.setChecked('opt_setChecked_Item3', true);
        },
    }
};

소스) syn.$m Javascript 예제