Core DOM manipulation functions
Core DOM manipulation functions
(add-class! elem classes)(add-class! elem classes & more-classes)Add classes to elem, trying to use Element::classList, and
falling back to fast string parsing/manipulation
Add `classes` to `elem`, trying to use Element::classList, and falling back to fast string parsing/manipulation
(ancestors elem)Lazy seq of the ancestors of elem
Lazy seq of the ancestors of `elem`
(append! parent child)(append! parent child & more-children)Append child to parent
Append `child` to `parent`
(bounding-client-rect elem)Returns a map of the bounding client rect of elem
as a map with [:top :left :right :bottom :width :height]
Returns a map of the bounding client rect of `elem` as a map with [:top :left :right :bottom :width :height]
(by-class class)(by-class base class)Returns a sequence of DOM nodes selected by class. class can be
a string or keyword and should not include the . selector prefix.
Expands to base.getElementsByClassName. If base node is given,
selection is limited to its descendant nodes.
Returns a sequence of DOM nodes selected by `class`. `class` can be a string or keyword and should not include the . selector prefix. Expands to `base.getElementsByClassName`. If `base` node is given, selection is limited to its descendant nodes.
(by-id id)Returns the DOM node with id in document if it exists, otherwise nil.
id can be a string or keyword. Expands to document.getElementById.
Returns the DOM node with id in document if it exists, otherwise nil. `id` can be a string or keyword. Expands to `document.getElementById`.
(by-tag tag)(by-tag base tag)Same behavior as by-class, selecting by tag instead of a class.
Same behavior as `by-class`, selecting by `tag` instead of a class.
(clear! elem)Clears all children from elem
Clears all children from `elem`
(closest elem selector)(closest base elem selector)Closest ancestor of elem (up to base, if provided)
that matches selector
Closest ancestor of `elem` (up to `base`, if provided) that matches `selector`
(descendant? descendant ancestor)Is descendant a descendant of ancestor?
(http://goo.gl/T8pgCX)
Is `descendant` a descendant of `ancestor`? (http://goo.gl/T8pgCX)
(has-class? elem c)Does elem contain c in its class list
Does `elem` contain `c` in its class list
(hidden? elem)Is elem hidden (as associated with hide!/show!/toggle!, using display: none)
Is `elem` hidden (as associated with hide!/show!/toggle!, using display: none)
(insert-after! elem other)Insert elem after other, other must have a parent
Insert `elem` after `other`, `other` must have a parent
(insert-before! elem other)Insert elem before other, other must have a parent
Insert `elem` before `other`, `other` must have a parent
(listen! elem-sel & type-fs)Adds f as a listener for events of type event-type on
elem-sel, which must either be a DOM node, or a sequence
whose first item is a DOM node.
In other words, the call to listen! can take two forms:
If elem-sel is a DOM node, i.e., you're doing something like:
(listen! elem :click click-handler)
then click-handler will be set as a listener for click events
on the elem.
If elem-sel is a sequence:
(listen! [elem :.selector.for :.some.descendants] :click click-handler)
then click-handler will be set as a listener for click events
on descendants of elem that match the selector
Also accepts any number of event-type and handler pairs for setting multiple listeners at once:
(listen! some-elem :click click-handler :hover hover-handler)
Adds `f` as a listener for events of type `event-type` on
`elem-sel`, which must either be a DOM node, or a sequence
whose first item is a DOM node.
In other words, the call to `listen!` can take two forms:
If `elem-sel` is a DOM node, i.e., you're doing something like:
(listen! elem :click click-handler)
then `click-handler` will be set as a listener for `click` events
on the `elem`.
If `elem-sel` is a sequence:
(listen! [elem :.selector.for :.some.descendants] :click click-handler)
then `click-handler` will be set as a listener for `click` events
on descendants of `elem` that match the selector
Also accepts any number of event-type and handler pairs for setting
multiple listeners at once:
(listen! some-elem :click click-handler :hover hover-handler)(listen-once! elem-sel & type-fs)Behaves like listen!, but removes the listener after the first event occurs.
Behaves like `listen!`, but removes the listener after the first event occurs.
(live-listener elem selector f)fires f if event.target is found with selector
fires f if event.target is found with `selector`
(matches-pred selector)(matches-pred base selector)Returns a predicate on nodes that match selector at the
time of this matches-pred call (may return outdated results
if you fuck with the DOM)
Returns a predicate on nodes that match `selector` at the time of this `matches-pred` call (may return outdated results if you fuck with the DOM)
(prepend! parent child)(prepend! parent child & more-children)Prepend child to parent
Prepend `child` to `parent`
(remove! elem)(remove! p elem)Remove elem from parent, return parent
Remove `elem` from `parent`, return `parent`
(remove-attr! elem k)(remove-attr! elem k & ks)Removes dom attributes on and returns elem.
class and classes are special cases which clear
out the class name on removal.
Removes dom attributes on and returns `elem`. `class` and `classes` are special cases which clear out the class name on removal.
(remove-class! elem c)(remove-class! elem class & classes)Remove c from elem class list
Remove `c` from `elem` class list
(remove-style! elem & keywords)Remove the style of elem using keywords:
(remove-style! elem :display :color)
Remove the style of `elem` using keywords: (remove-style! elem :display :color)
(replace! elem new)Replace elem with new, return new
Replace `elem` with `new`, return `new`
(replace-contents! p child)Replace children of elem with child
Replace children of `elem` with `child`
(sel data)(sel base data)Same behavior as sel1, instead keeping the full array that by-class
or by-tag expand to. Falls back to document.querySelectorAll instead of
document.querySelector.
Same behavior as `sel1`, instead keeping the full array that `by-class` or `by-tag` expand to. Falls back to `document.querySelectorAll` instead of `document.querySelector`.
(sel1 data)(sel1 base data)Select a single DOM node. Tries to expand to the native selector methods
as defined by by-id, by-class, and by-tag, falling back to
document.querySelector when the selector isn't a constant.
Select a single DOM node. Tries to expand to the native selector methods as defined by `by-id`, `by-class`, and `by-tag`, falling back to `document.querySelector` when the selector isn't a constant.
(selector data)Returns a selector in string format. Accepts string, keyword, or collection.
Returns a selector in string format. Accepts string, keyword, or collection.
(set-attr! elem k)(set-attr! elem k v)(set-attr! elem k v & kvs)Sets dom attributes on and returns elem.
Attributes without values will be set to their name:
(set-attr! elem :disabled)
With values, the function takes variadic kv pairs:
(set-attr! elem :id "some-id"
:name "some-name")
Sets dom attributes on and returns `elem`.
Attributes without values will be set to their name:
(set-attr! elem :disabled)
With values, the function takes variadic kv pairs:
(set-attr! elem :id "some-id"
:name "some-name")(set-class! elem c)Set the css class of elem to elem
Set the css class of `elem` to `elem`
(set-html! elem html)Set the innerHTML of elem to html
Set the innerHTML of `elem` to `html`
(set-style! elem & kvs)Set the style of elem using key-value pairs:
(set-style! elem :display "block" :color "red")
Set the style of `elem` using key-value pairs: (set-style! elem :display "block" :color "red")
(set-text! elem text)Set the textContent of elem to text, fall back to innerText
Set the textContent of `elem` to `text`, fall back to innerText
(set-value! elem value)Set the value of elem to value
Set the value of `elem` to `value`
(style elem)(style elem k)The computed style of elem, optionally specifying the key of
a particular style to return
The computed style of `elem`, optionally specifying the key of a particular style to return
(toggle! elem)(toggle! elem show?)Display or hide the given elem (using display: none).
Takes an optional boolean show?
Display or hide the given `elem` (using display: none). Takes an optional boolean `show?`
(toggle-attr! elem k)(toggle-attr! elem k add?)Toggles a dom attribute k on elem, optionally specifying
the boolean value with add?
Toggles a dom attribute `k` on `elem`, optionally specifying the boolean value with `add?`
(toggle-class! elem c)(toggle-class! elem class add?)(toggle-class! elem class) will add-class! if elem does not have class and remove-class! otherwise. (toggle-class! elem class add?) will add-class! if add? is truthy, otherwise it will remove-class!
(toggle-class! elem class) will add-class! if elem does not have class and remove-class! otherwise. (toggle-class! elem class add?) will add-class! if add? is truthy, otherwise it will remove-class!
(unlisten! elem-sel & type-fs)Removes event listener for the element defined in elem-sel,
which is the same format as listen!.
The following forms are allowed, and will remove all handlers that match the parameters passed in:
(unlisten! [elem :.selector] :click event-listener)
(unlisten! [elem :.selector]
:click event-listener
:mouseover other-event-listener)
Removes event listener for the element defined in `elem-sel`,
which is the same format as listen!.
The following forms are allowed, and will remove all handlers
that match the parameters passed in:
(unlisten! [elem :.selector] :click event-listener)
(unlisten! [elem :.selector]
:click event-listener
:mouseover other-event-listener)cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |