<div class="container div1" active="true">
  <ul class="list1">
    <li class="item1">1</li>
    <li class="item2">2</li>
    <li class="item3">3</li>
  </ul>
  <div class="div2" active="true">
    <ul class="list2">
      <li class="item4">4</li>
      <li class="item5">5</li>
    </ul>
  </div>
</div>

$, $.all

$는 document.querySelector를 사용하고 $.all은 document.querySelectorAll을 사용합니다.

console.log($(".container li"));
// li.item1

console.log($.all(".container li"));
// NodeList(5) [li.item1, li.item2, li.item3, li.item4, li.item5]

$.find, $.findAll

$.find는 el.querySelector를 사용하고 $.findAll은 el.querySelectorAll을 사용합니다.

console.log($.find("li", $(".container div")));
// li.item4

console.log($.findAll("li", $(".container div")));
// NodeList(2) [li.item4, li.item5]

console.log($.find("li", $(".container")));
// li.item1

console.log($.findAll("li", $(".container")));
// NodeList(5) [li.item1, li.item2, li.item3, li.item4, li.item5]

console.log($.findAll("ul li", $(".container")));
// NodeList(5) [li.item1, li.item2, li.item3, li.item4, li.item5]

`el.querySelector`나 `el.querySelectorAll`의 아쉬운점

el.querySelector나 el.querySelectorAll의 경우는 셀렉터의 시작으로 >를 사용할 수 없습니다.

try {
  document.querySelector(".container").querySelectorAll("> ul li");
} catch (e) {
  console.log(e);
  // DOMException: Failed to execute 'querySelectorAll' on 'Element': '> ul li' is not a valid selector.
}

el.querySelector나 el.querySelectorAll의 경우는 셀렉터의 시작이 부모도 포함하고, 자식요소도 포함한다는 점을 유의해야합니다.

console.log(
  document.querySelector(".container").querySelectorAll("[active=true] > ul li")
);
// NodeList(5) [li.item1, li.item2, li.item3, li.item4, li.item5]

with >, with &

아래 예제는 $.find, $.findAll와 el.querySelector나 el.querySelectorAll의 차이를 보여줍니다.

$.find, $.findAll은 >를 셀렉터의 시작으로 사용할 수 있습니다.
&를 통해 부모 element에 대해서만 추가 조건을 붙일 수 있습니다.

console.log($.findAll("> ul li", $(".container")));
// NodeList(5) [li.item1, li.item2, li.item3]

console.log($.findAll('&[active="true"] li', $(".container")));
// NodeList(5) [li.item1, li.item2, li.item3, li.item4, li.item5]

console.log($.findAll('&[active="true"] > ul li', $(".container")));
// NodeList(5) [li.item1, li.item2, li.item3]

console.log($.findAll('&[active="false"] li', $(".container")));
// NodeList() []

$.closest

자신을 포함하여 셀렉터와 매칭되는 부모 엘리먼트를 찾습니다.

console.log($.closest("li", $(".item4")));
// li.item4

console.log($.closest("ul", $(".item4")));
// ul.list2

console.log($.closest("div", $(".item4")));
// div.div2

console.log($.closest("div.container", $(".item4")));
// div.container.div1

$.children

$.prevAll

$.nextAll

$.prev

$.next

$.siblings

$.is

첫 번째 인자에 전달된 셀렉터와 매칭이 되는지 확인합니다.

console.log($.is(".item1", $("li:nth-child(1)")));
// true

console.log($.is(".item1", $("li:nth-child(2)")));
// true

$.contains

Create

$.els

console.log($.els('<span class="s1">1</span>'));
// HTMLCollection(2) [span.s1]

console.log($.els('<span class="s1">1</span><span class="s2">2</span>'));
// HTMLCollection(2) [span.s1, span.s2]

$.el

console.log($.el('<span class="s1">1</span>'));
// span.s1

console.log($.el('<span class="s1">1</span><span class="s2">2</span>'));
// span.s1

Manipulation

$.appendTo

$.appendTo($(".comments"), $.el('<div class="comment">새 댓글</div>'));

$.prependTo

$.prependTo($(".posts"), $.el('<div class="post">새 글</div>'));

$.append

$.append($.el('<div class="comment">새 댓글</div>'), $(".comments"));

$.prepend

$.prepend($.el('<div class="post">새 글</div>'), $(".posts"));

$.before

$.insertBefore

$.after

$.insertAfter

$.replaceAll

$.replaceWith

$.remove

$.remove($(".post"));

$.text

console.log($.text($.el("<div>hi</div>")));
// "hi"

$.setText

console.log($.setText("ho", $.el("<div></div>")));
// HTMLDivElement <div>ho</div>

$.html

console.log($.html($.el("<div><span>hi</span></div>")));
// "<span>hi</span>"

$.setHTML

console.log($.setHTML("<span>ho</span>", $.el("<div></div>")));
// HTMLDivElement <div><span>ho</span></div>

$.outerHTML

console.log($.outerHTML($.el("<div><span>hi</span></div>")));
// "<div><span>hi</span></div>"

$.setOuterHTML

let el = $("#div1");
$.setOuterHTML('<div id="div1" class="hi2"></div>', el);
console.log($("#div1"));
// HTMLDivElement <div id="div1" class="hi2"></div>

$.val

console.log($.val($.el('<input type="text" value="hoho">')));
// "hoho"

$.setVal

console.log($.setVal("hoho", $.el('<input type="text">')).value);
// "hoho"

$.attr

console.log($.attr("type", $.el('<input type="text" value="hoho">')));
// "text"

$.setAttr

console.log($.setAttr({ status: "ho" }, $.el('<div status="hi">')));
// HTMLDivElement <div status="ho"></div>
console.log(
  $.setAttr({ status: "ho", class: "ye" }, $.el('<div status="hi">'))
);
// HTMLDivElement <div status="ho" class="ye"></div>
console.log($.setAttr(["status", "ho"], $.el('<div status="hi">')));
// HTMLDivElement <div status="ho"></div>
console.log($.setAttr({ status: "" }, $.el('<div status="hi">')));
// HTMLDivElement <div status></div>

$.removeAttr

console.log($.removeAttr("status", $.el('<div status="hi">')));
// HTMLDivElement <div></div>

$.prop

$.setProp

$.removeProp

CSS

$.addClass

console.log($.addClass("selected", $.el("div")));
// HTMLDivElement <div class="selected"></div>
console.log($.addClass("hi ho", $.el("div")));
// HTMLDivElement <div class="hi ho"></div>
console.log($.addClass("hi", $.el('<div class="ye">')));
// HTMLDivElement <div class="ye hi"></div>

$.removeClass

console.log($.removeClass("selected", $.el('<div class="selected"></div>')));
// HTMLDivElement <div class></div>
console.log($.removeClass("hi ho", $.el('<div class="hi ho"></div>')));
// HTMLDivElement <div class></div>
console.log($.removeClass("hi", $.el('<div class="ye hi">')));
// HTMLDivElement <div class="ye"></div>

$.toggleClass

console.log($.toggleClass("selected", $.el('<div class="selected"></div>')));
// HTMLDivElement <div class></div>

console.log($.toggleClass("selected", $.el("<div></div>")));
// HTMLDivElement <div class="selected"></div>

$.hasClass

console.log($.hasClass("selected", $.el('<div class="selected"></div>')));
// true

console.log($.hasClass("a", $.el('<div class="b"></div>')));
// false

$.css

$.setCss

$.show

$.hide

$.toggle

$.offset

console.log(
  $.offset(
    $.append(
      $("body"),
      $.setCss(
        {
          position: "absolute",
          top: "20px",
          left: "30px",
          "margin-top": "50px",
        },
        $.el("div")
      )
    )
  )
);
// { top: 70, left: 30 }

$.offsetParent

$.position

$.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를 사용할 수 있습니다.

<button type="button" id="btn1">
  <span>btn1</span>
</button>

const addClickEvent = $.on("click", function (e) {
  console.log(e.currentTarget); // #btn1
  console.log(e.target); // span
});

addClickEvent($("#btn1"));
addClickEvent($("#btn1")); // 두 번 등록해도 추가로 등록되지 않음.
$.trigger("click", $("#btn1 span"));
// #btn1
// span

$.on의 두 번째 인자에 셀렉터를 전달하면 매칭되는 자식요소에 이벤트를 등록합니다. 이 방식은 위임 방식이 아니며, 역시 el.addEventListener의 주요 특징과 기능을 모두 사용할 수 있습니다.

<div class="articles">
  <div class="article">
    <button type="button" class="remove"><span>삭제</span></button>
  </div>
  <div class="article">
    <button type="button" class="remove"><span>삭제</span></button>
  </div>
</div>

const Articles = {
  addEvents: pipe(
    $.on("click", ".article:nth-child(1)", function (e) {
      console.log(e.currentTarget);
    }),
    $.on(
      "click",
      ".article",
      function (e) {
        console.log(e.currentTarget);
      },
      { capture: true }
    ),
    $.on("click", ".remove", function (e) {
      console.log("other_data:", e.other_data);
      console.log(e.currentTarget);
    })
  ),
};

Articles.addEvents($(".articles"));

$.trigger("click", $(".articles .article:nth-child(1) .remove")); // 한 번만 실행
// other_data: undefined
// button.remove
// div.article

$.trigger("click", $(".articles .article:nth-child(2) .remove"));
// div.article
// other_data: undefined
// button.remove

$.append(
  $(".articles"),
  $.el(`
  <div class="article new">
    <button type="button" class="remove"><span>삭제</span></button>
  </div>
`)
);

Articles.addEvents($(".articles"));

$.trigger("click", $(".articles .article:nth-child(1) .remove")); // 한 번만 실행
// other_data: undefined
// button.remove
// div.article

$.trigger("click", $(".articles .article:nth-child(3) .remove"));
// div.article.new
// other_data: undefined
// button.remove

$.trigger(
  "click",
  { other_data: "hi" },
  $(".articles .article:nth-child(3) .remove")
);
// div.article.new
// other_data: hi
// button.remove

$.off

$.on에 전달한 모든 인자를 동일하게 전달하여 이벤트를 지울 수 있습니다.

<button type="button" id="btn2"></button>

const eventArgs = [
  "click",
  function () {
    console.log("hi~");
  },
];
$.on(...eventArgs)($("#btn2"));
$.off(...eventArgs)($("#btn2"));
$.trigger("click", $("#btn2"));
// nothing

$.delegate

이벤트 위임 방식으로 이벤트를 등록합니다. 이벤트를 등록하고자 하는 엘리먼트가 동적으로 간편하게 이벤트를 등록해둘 수 있습니다.

<div class="users"></div>

go(
  $(".users"),
  $.delegate("click", ".remove", function () {
    console.log("remove user");
  })
);

$.append(
  $(".users"),
  $.el(`
  <div class="user new">
    <button type="button" class="remove"><span>삭제</span></button>
  </div>
`)
);

$.trigger("click", $(".users .remove"));
// remove user

이벤트 위임 방식은 아래와 같은 옵션들을 사용할 필요가 없는 상황에 한하여 사용하는 것을 권장합니다.

el.addEventListener의 capture, passive 등의 옵션을 사용할 수 없습니다.
e.preventDefault, e.stopPropagation을 사용할 수 없습니다.
el.removeEventListener와 $.off를 사용할 수 없습니다.
mouseleave, mouseenter는 정상 동작하지 않습니다.

don.js에서는 이벤트 위임 방식에서 위 기능들을 모두 구현하여 제공했지만, 사실상 브라우저의 이벤트에 대한 모든 동작을 라이브러리 위에 다시 구현하는 장황한 코드들이 필요하며, 경험상 그 실용성이 떨어진다고 생각하여 FxDOM은 해당 기능을 구현하지 않는 컨셉으로 가고자 합니다.

$.delegate + & 응용

<div class="signup" agree="false">
  <input type="checkbox" />
  <button type="button">가입</button>
</div>

go(
  $(".signup"),
  $.delegate("change", "input", function (e) {
    $.setAttr({ agree: e.currentTarget.checked }, e.delegateTarget);
  }),
  $.delegate("click", '&[agree="false"] button', function () {
    console.log("동의해주세요!");
  }),
  $.delegate("click", '&[agree="true"] button', function () {
    console.log("감사합니다!");
  })
);

$.trigger("click", $(".signup button"));
// 동의해주세요!
$.trigger("click", $(".signup input"));
$.trigger("click", $(".signup button"));
// 감사합니다!

$.ready

Data

$.data, $.setData

<div class="item" data-fx-json='{"id": 1, "active": true}'></div>
<div class="item2"></div>

const { id, active } = $.data($(".item"));
console.log(id, active);
// 1 true

const data = $.data($.setData({ id: 1, active: false }, $(".item")));
console.log(data.active);
// false
data.active = true;
console.log($.data($(".item")).active);
// true

$.dataStr

const data = { id: 1, active: true };
const item = document.createElement(
  `<div class="item" data-fx-json="${$.dataStr(data)}">`
);

const { id, active } = $.data(item);
console.log(id, active);
// 1 true

Fetch

$.get, $.post, $.put, $.delete의 Content-Type은 application/json으로 설정되어있으며 응답이 오면 JSON 객체를 반환합니다. 4개 함수 모두 필요 인자는 2개 이상이며, 인자를 1개만 전달하면 함수를 리턴합니다.

$.get

$.get("/api/posts", { offset: 0, limit: 10 }); // GET '/api/posts?offset=0&limit10'
// Promise [{id: 1, ...}, {id: 2, ...}, ...]

$.post

$.post("/api/posts", { content: "ho~" }); // POST /api/posts, BODY { content: 'ho~' }
// Promise {id:1, content: 'ho', created_at: ... }

$.put

$.put(`/api/posts/${post.id}`, post); // PUT /api/posts/1, BODY { id: 1, ... }
// Promise {id:1, content: 'ho', updated_at: ... }

$.delete

$.delete(`/api/posts/${post.id}`, undefined); // DELETE /api/posts/1

FAQs

What is fxdom?

Is fxdom popular?

Is fxdom well maintained?

Last updated on 15 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

fxdom

FxDOM

Selector