FxJS-DOM
HTML DOM Bindings for the FxJS
Selector
1 2 3 4 5
$, $.all
$
는 document.querySelector
를 사용하고 $.all
은 document.querySelectorAll
을 사용합니다.
console;// li.item1 console;// NodeList(5) [li.item1, li.item2, li.item3, li.item4, li.item5]
$.find, $.findAll
$.find
는 el.querySelector
를 사용하고 $.findAll
은 el.querySelectorAll
을 사용합니다.
console;// li.item4 console;// NodeList(2) [li.item4, li.item5] console;// li.item1 console;// NodeList(5) [li.item1, li.item2, li.item3, li.item4, li.item5] console;// NodeList(5) [li.item1, li.item2, li.item3, li.item4, li.item5]
el.querySelector
나 el.querySelectorAll
의 아쉬운점
el.querySelector
나 el.querySelectorAll
의 경우는 셀렉터의 시작으로 >
를 사용할 수 없습니다.
try document; catch e console; // DOMException: Failed to execute 'querySelectorAll' on 'Element': '> ul li' is not a valid selector.
el.querySelector
나 el.querySelectorAll
의 경우는 셀렉터의 시작이 부모도 포함하고, 자식요소도 포함한다는 점을 유의해야합니다.
console;// NodeList(5) [li.item1, li.item2, li.item3, li.item4, li.item5]
with >, with &
아래 예제는 $.find
, $.findAll
와 el.querySelector
나 el.querySelectorAll
의 차이를 보여줍니다.
$.find, $.findAll
은>
를 셀렉터의 시작으로 사용할 수 있습니다.&
를 통해 부모 element에 대해서만 추가 조건을 붙일 수 있습니다.
console;// NodeList(5) [li.item1, li.item2, li.item3] console;// NodeList(5) [li.item1, li.item2, li.item3, li.item4, li.item5] console;// NodeList(5) [li.item1, li.item2, li.item3] console;// NodeList() []
$.closest
자신을 포함하여 셀렉터와 매칭되는 부모 엘리먼트를 찾습니다.
console;// li.item4 console;// ul.list2 console;// div.div2 console;// div.container.div1
$.children
$.prevAll
$.nextAll
$.prev
$.next
$.is
첫 번째 인자에 전달된 셀렉터와 매칭이 되는지 확인합니다.
console;// true console;// true
$.contains
Create
$.els
console;// HTMLCollection(2) [span.s1] console;// HTMLCollection(2) [span.s1, span.s2]
$.el
console;// span.s1 console;// span.s1
Manipulation
$.append
$;
$.prepend
$;
$.before
$.after
$.remove
$;
$.text
console;// "hi"
$.setText
console;// HTMLDivElement <div>ho</div>
$.html
console;// "<span>hi</span>"
$.setHtml
console;// HTMLDivElement <div><span>ho</span></div>
$.outerHTML
console;// "<div><span>hi</span></div>"
$.setOuterHTML
let el = ;$;console;// HTMLDivElement <div id="div1" class="hi2"></div>
$.val
console;// "hoho"
$.setVal
console;// "hoho"
$.attr
console;// "text"
$.setAttr
console;// HTMLDivElement <div status="ho"></div>console;// HTMLDivElement <div status="ho" class="ye"></div>console;// HTMLDivElement <div status="ho"></div>console;// HTMLDivElement <div status></div>
$.removeAttr
console;// HTMLDivElement <div></div>
CSS
$.addClass
console;// HTMLDivElement <div class="selected"></div>console;// HTMLDivElement <div class="hi ho"></div>console;// HTMLDivElement <div class="ye hi"></div>
$.removeClass
console;// HTMLDivElement <div class></div>console;// HTMLDivElement <div class></div>console;// HTMLDivElement <div class="ye"></div>
$.removeClass
console;// HTMLDivElement <div class></div>console;// HTMLDivElement <div class></div>console;// HTMLDivElement <div class="ye"></div>
$.toggleClass
console;// HTMLDivElement <div class></div> console;// HTMLDivElement <div class="selected"></div>
$.css
$.setCss
$.show
$.hide
$.toggle
$.offset
console;// { top: 70, left: 30 }
$.width
width
$.height
height
$.innerWidth
width + paddingLeft + paddingRight + borderLeft + borderRight
$.innerHeight
height + paddingTop + paddingBottom + borderTop + borderBottom
$.outerWidth
innerWidth + marginLeft + marginRight
$.outerHeight
innerHeight + marginTop + marginBottom
$.scrollTop
$.scrollLeft
$.setScrollTop
$.setScrollLeft
Event
$.on
$.on
은 el.addEventListener
를 대신합니다. $.on
은 이벤트를 등록할 함수를 리턴하며, 커링 방식으로만 사용할 수 있습니다.
- 인자로 받은 함수를 조작하지 않고
el.addEventListener
에 그대로 적용하여, 같은 엘리먼트에 같은 이벤트와 같은 함수를 등록이 되지 않는el.addEventListener
의 특징을 그대로 유지했습니다. el.addEventListener
의capture
,passive
등의 옵션을 사용할 수 있습니다.e.preventDefault
,e.stopPropagation
을 사용할 수 있습니다.el.removeEventListener
와$.off
를 사용할 수 있습니다.
btn1
const addClickEvent = $; ;; // 두 번 등록해도 추가로 등록되지 않음.$;// #btn1// span
$.on
의 두 번째 인자에 셀렉터를 전달하면 매칭되는 자식요소에 이벤트를 등록합니다. 이 방식은 위임 방식이 아니며, 역시 el.addEventListener
의 주요 특징과 기능을 모두 사용할 수 있습니다.
삭제 삭제
const Articles = addEvents: ; Articles; $; // 한 번만 실행// other_data: undefined// button.remove// div.article $;// div.article// other_data: undefined// button.remove $; Articles; $; // 한 번만 실행// other_data: undefined// button.remove// div.article $;// div.article.new// other_data: undefined// button.remove $;// div.article.new// other_data: hi// button.remove
$.off
$.on
에 전달한 모든 인자를 동일하게 전달하여 이벤트를 지울 수 있습니다.
const eventArgs = 'click' { console };$;$;$;// nothing
$.delegate
이벤트 위임 방식으로 이벤트를 등록합니다. 이벤트를 등록하고자 하는 엘리먼트가 동적으로 간편하게 이벤트를 등록해둘 수 있습니다.
; $; $;// remove user
이벤트 위임 방식은 아래와 같은 옵션들을 사용할 필요가 없는 상황에 한하여 사용하는 것을 권장합니다.
el.addEventListener
의capture
,passive
등의 옵션을 사용할 수 없습니다.e.preventDefault
,e.stopPropagation
을 사용할 수 없습니다.el.removeEventListener
와$.off
를 사용할 수 없습니다.mouseleave
,mouseenter
는 정상 동작하지 않습니다.
don.js에서는 이벤트 위임 방식에서 위 기능들을 모두 구현하여 제공했지만, 사실상 브라우저의 이벤트에 대한 모든 동작을 라이브러리 위에 다시 구현하는 장황한 코드들이 필요하며, 경험상 그 실용성이 떨어진다고 생각하여 FxJS-DOM은 해당 기능을 구현하지 않는 컨셉으로 가고자 합니다.
$.delegate + & 응용
가입
; $;// 동의해주세요!$;$;// 감사합니다!
Data
$.data, $.setData
const id active = $data;console;// 1 true const data = $data$;console;// falsedataactive = true;console;// true
Fetch
$.get, $.post, $.put, $.delete
의 Content-Type
은 application/json
으로 설정되어있으며 응답이 오면 JSON 객체를 반환합니다. 4개 함수 모두 필요 인자는 2개 이상이며, 인자를 1개만 전달하면 함수를 리턴합니다.
$.get
$; // GET '/api/posts?offset=0&limit10'// Promise [{id: 1, ...}, {id: 2, ...}, ...]
$.post
$; // POST /api/posts, BODY { content: 'ho~' }// Promise {id:1, content: 'ho', created_at: ... }
$.put
$; // PUT /api/posts/1, BODY { id: 1, ... }// Promise {id:1, content: 'ho', updated_at: ... }
$.delete
$; // DELETE /api/posts/1