syn.$m: DOM (Document Object Model) 조작 기능을 제공합니다.
속성
syn.$m.version
$manipulation version을 반환합니다.
메서드
syn.$m.childNodes()
확인
document.body 노드의 자식 노드가 포함된 NodeList를 반환합니다.
syn.$m.children()
확인
document.body 노드의 자식 노드가 포함된 HTMLCollection을 반환합니다.
syn.$m.firstChild()
확인
document.body 노드의 text 노드를 포함하는 첫 번째 자식 노드를 반환합니다.
syn.$m.firstElementChild()
확인
document.body 노드의 text 노드를 제외하는 첫 번째 자식 노드를 반환합니다.
syn.$m.lastChild()
확인
document.body 노드의 text 노드를 포함하는 마지막 자식 노드를 반환합니다.
syn.$m.lastElementChild()
확인
document.body 노드의 text 노드를 제외하는 마지막 자식 노드를 반환합니다.
Apple (first li)
Banana (second li)
syn.$m.nextSibling()
Apple 노드 확인
Banana 노드 확인
지정된 노드 바로 다음에 text 노드를 포함하는 노드를 반환합니다.
Apple (first li)
Banana (second li)
syn.$m.nextElementSibling()
Apple 노드 확인
Banana 노드 확인
지정된 노드 바로 다음에 text 노드를 제외하는 노드를 반환합니다.
Apple (first li)
Banana (second li)
syn.$m.previousSibling()
Apple 노드 확인
Banana 노드 확인
지정된 노드 바로 이전에 text 노드를 포함하는 노드를 반환합니다.
Apple (first li)
Banana (second li)
syn.$m.previousElementSibling()
Apple 노드 확인
Banana 노드 확인
지정된 노드 바로 이전에 text 노드를 제외하는 노드를 반환합니다.
syn.$m.siblings()
확인
btn_siblings 버튼의 동일한 위치의 노드 목록을 반환합니다.
syn.$m.parentNode()
확인
지정된 노드의 text 노드를 포함하는 부모 노드를 반환합니다.
syn.$m.parentElement()
확인
지정된 노드의 text 노드를 제외하는 부모 노드를 반환합니다.
syn.$m.value()
확인
지정된 노드의 value 속성을 조회하거나 설정합니다.
syn.$m.textContent()
확인
지정된 노드의 textContent 속성을 조회하거나 설정합니다.
syn.$m.innerText()
확인
지정된 노드의 innerText 속성을 조회하거나 설정합니다.
syn.$m.innerHTML()
확인
지정된 노드의 innerHTML 속성을 조회하거나 설정합니다.
syn.$m.outerHTML()
hello world
확인
지정된 노드의 outerHTML 속성을 조회합니다.
syn.$m.className()
확인
지정된 노드의 className 속성을 조회합니다.
syn.$m.removeAttribute(), syn.$m.getAttribute(), syn.$m.setAttribute()
removeAttribute 확인
getAttribute 확인
setAttribute 확인
지정된 노드의 attribute 속성을 조회, 설정, 삭제합니다.
syn.$m.appendChild()
Apple
Banana
확인
지정된 노드의 마지막 위치에 자식 노드를 추가합니다.
syn.$m.setStyle()
Hello World
확인
지정된 노드의 Style 속성을 설정합니다.
syn.$m.addStyle()
Hello World
확인
지정된 노드의 여러개의 Style 속성을 설정합니다.
syn.$m.addCssText()
Hello World
확인
지정된 노드의 cssText 속성을 설정합니다.
syn.$m.getStyle()
Hello World
확인
지정된 노드의 Style 속성을 조회합니다.
syn.$m.getComputedStyle()
확인
지정된 노드의 브라우저에서 계산된 Style 속성을 조회합니다.
syn.$m.hasHidden()
확인
지정된 노드의 브라우저에서 계산된 숨김 여부를 조회합니다.
syn.$m.addClass()
Hello World
addClass 확인
지정된 노드에 여러개의 className을 조회하거나 설정합니다.
hasClass 확인
지정된 노드에 className 설정 여부를 조회합니다.
확인
지정된 노드에 특정 className 설정을 토글합니다.
확인
지정된 노드에 특정 className 설정을 삭제합니다.
syn.$m.append()
확인
지정된 노드의 마지막 위치에 자식 노드를 추가합니다.
syn.$m.prepend()
확인
지정된 노드의 첫번째 위치에 자식 노드를 추가합니다.
syn.$m.copy()
확인
지정된 노드의 자식 노드를 포함하여 복사 노드를 반환합니다.
syn.$m.remove()
확인
지정된 노드를 삭제합니다.
syn.$m.hasChild()
확인
지정된 노드의 자식 노드를 여부를 확인합니다.
syn.$m.insertAfter()
확인
특정 노드의 앞에 또는 마지막 위치에 노드를 추가합니다.
syn.$m.display(), syn.$m.toggleDisplay()
hello world
표시 여부
display 확인
toggleDisplay 확인
지정된 노드의 표시 여부를 조회하거나 설정합니다.
syn.$m.parent()
부모 노드 확인
id 상위 노드 확인
지정된 노드의 id를 포함하는 상위 노드 또는 부모 노드를 반환합니다.
{ "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": "hello world", "text": "hello world", "content": "hello world", "html": "hello world" }
syn.$m.create()
확인
JSON 객체로 HTML 노드를 생성합니다.
syn.$m.each()
확인
지정된 배열의 갯수만큼 반복 함수를 실행합니다.
syn.$m.setActive()
hello world
active 적용 여부
확인
지정된 노드에 active className 을 설정하거나 삭제합니다.
syn.$m.setSelected()
One
Two
Three
Four
Five
확인
지정된 그룹 또는 목록 노드에 selected 을 설정합니다
syn.$m.setChecked()
Option 1
Option 2
Option 3
확인
지정된 그룹 또는 목록 노드에 checked 을 설정합니다
syn.$m.each()
확인
지정된 배열의 갯수만큼 반복 함수를 실행합니다.