HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Selection
A api for selecting and manipulating elements from the dom based upon querySelector and querySelectorAll.
Examples
// selecting by id
hx.select('#some-id')

// selecting one element by class
hx.select('.some-class')

// selecting all elements by class
hx.selectAll('.some-class')

// selecting all elements by type
hx.selectAll('div')
hx.selectAll('button')
hx.select('input')

// chaining selects to limit selections to a certain part of the dom
hx.select('#some-id').selectAll('.some-class')

// setting a style property for a selection
hx.selectAll('.some-class').style('background', 'red')

// getting a style property for a selection
hx.selectAll('.some-class').style('background')

// get the height of an element
hx.select('#some-id').height()
Api
Change Log
Prototypes
Selection
The type returned from hx.select and hx.selectAll.
Methods
htmlSelectiondeprecated
Deprecated
The html method for selections has been removed to prevent XSS attacks.
Sets the html content of all the selected elements
Shorthand for selection.prop('innerHtml', value)
htmlString
The html to use.
Returns
Selection
This Selection
htmldeprecated
Deprecated
The html method for selections has been removed to prevent XSS attacks.
Gets the html content of all the selected elements
Shorthand for selection.prop('innerHtml')
String / Array[String]
The html content of the selected element, or nodes if this is a multiple selection.
addelementString / Element / SelectionSelection
Appends an element to all elements currently selected and returns the original Selection. Use 'div' to append a <div> element for example.
Arguments
elementString / Element / Selection
The element type to append, or the element to append, or a selection containing an element to append.
Returns
Selection
This Selection
animateAnimation
Creates a new animation using the first node in the selection. Only available if the animate module is included.
Returns
Animation
apiAny
A method for and getting an API object from a DOM node.
All hexagon components register an API, the first un-named API to be registered can be retrieved with this method.
Returns
Any
The API that was set on the object
apinameStringAny
A method for and getting an API object from a DOM node under a given name
All hexagon components register an API, the first un-named API to be registered can be retrieved with this method.
Arguments
nameString
The name to give this API so it can be retrieved explicitly from the node using .api('name'))
Returns
Any
The API that was set on the object
apiapiToSetObject / FunctionSelection
A method for and setting an API object from a DOM node.
All hexagon components register an API, the first un-named API to be registered can be retrieved with this method.
Arguments
apiToSetObject / Function
An object or function to set as the API object on this element. It is stored in the DOM and can be retrieved elsewhere using select(thisNode).api()
Returns
Selection
This Selection
apiapiToSetObject / FunctionnameStringnameStringSelection
A method for and setting an API object from a DOM node under a given name
All hexagon components register an API, the first un-named API to be registered can be retrieved with this method.
Arguments
apiToSetObject / Function
An object or function to set as the API object on this element. It is stored in the DOM and can be retrieved elsewhere using select(thisNode).api('name')
nameString
The name to give this API so it can be retrieved explicitly from the node using .api('name'))
nameString
Returns
Selection
This Selection
appendelementString / Element / SelectionSelection
Appends an element to all elements currently selected and returns a new Selection containing the new elements. Use 'div' to append a <div> element for example.
Arguments
elementString / Element / Selection
The element type to append, or the element to append, or a selection containing an element to append.
Returns
Selection
A new Selection containing the new elements
attrattributeStringvalueStringSelection
Sets an attribute on the Elements selected. 
// will set the class attribute value to 'myclass' for the
// single element in the selection this will return the current
// selection for chaining
hx.select('#some-id').attr('placeholder', 'Enter Text...')
// will set the class attribute value to 'myclass' for all the
// elements in the selection this will return the current selection
// for chaining
hx.selectAll('.some-class').attr('placeholder', 'Enter Text...')
Arguments
attributeString
The attribute to get, or if a value is being supplied the attribute to set the value of.
valueString
The value to set the attribute to.
Returns
Selection
This Selection
attrattributeStringString / Array[String]
Gets an attribute on the Elements selected. 
// will return the class attribute for the selected element
hx.select('#some-id').attr('class')
// will return an array of class attributes for all the selected elements
hx.selectAll('.some-class').attr('class')
Arguments
attributeString
The name of the attribute to get.
Returns
String / Array[String]
The attribute value or values for a multiple selection
boxClientRect / Array[ClientRect]
Returns the bounding boxes for the elements in the selection.
Returns
ClientRect / Array[ClientRect]
classSelection
Sets the class attribute for all of the selected elements
Shorthand for selection.attr('class', value)
classString
The class to set.
Returns
Selection
This Selection
class
Gets the class attribute for all of the selected elements
Shorthand for selection.attr('class')
String / Array[String]
The class of the selected element or list of classes if this is a multiple selection.
classedclassStringaddBooleanSelection
Adds or removes a class to the list of classes for all selected elements. Returns the current selection for chaining.
Arguments
classString
The class to add/remove.
addBoolean
True to add the class, false to remove it.
Returns
Selection
classedclassStringBoolean / Array[Boolean]
Checks if the selected element(s) have the class supplied.
Arguments
classString
The class to check existance of.
Returns
Boolean / Array[Boolean]
Whether or not the elements have the class. True means they do.
clearSelection
Removes all child elements from the selected node(s)
Returns
Selection
This Selection
closestselectorStringSelection
Traverses up the dom to find the first parent element matching the selector given.
Arguments
selectorString
The css selector to look for.
Returns
Selection
containselementElementBoolean
Checks if an element is contained by the current selection
Arguments
elementElement
The element to check is contained by one of the selected nodes.
Returns
Boolean
emptyBoolean
Returns true if the selection is empty, false if not.
Returns
Boolean
filterfFunction[Element]Selection
Returns a new selection by filtering on the elements in this selection.
Arguments
fFunction[Element]
A function that takes a HTML element as its first parameter and returns a Boolean. True to keep the element, False otherwise.
Returns
Selection
forEachfFunction[Selection]Selection
Calls a function for each element in the selection. Returns this selection for chaining.
Arguments
fFunction[Selection]
A function that takes a selected node as its first parameter
Returns
Selection
This Selection
heightNumber / Array[Number]
Returns the heights of the elements selected.
Returns
Number / Array[Number]
insertAfterelementString / Element / SelectionSelection
Inserts an element after each node in the current selection. The inserted element will be at the same level in the dom tree as the selected element(s).
Arguments
elementString / Element / Selection
The element type to insert, or the element to insert, or a selection containing an element to insert.
Returns
Selection
A new Selection containing the new elements
insertBeforeelementString / Element / SelectionSelection
Inserts an element before each node in the current selection. The inserted element will be at the same level in the dom tree as the selected element(s).
Arguments
elementString / Element / Selection
The element type to insert, or the element to insert, or a selection containing an element to insert.
Returns
Selection
A new Selection containing the new elements
mapfFunction[Selection]Any / Array[Any]
Calls a function for each element in the selection. Returns an array of the results of calling f on the elements. If used on a single selection the result will not be wrapped in an array.
Arguments
fFunction[Selection]
A function that takes a Selection as its first parameter
Returns
Any / Array[Any]
The result of the function f
morphMorph
Creates a new morph using the first node in the selection. Only available if the animate module is included.
Returns
Morph
nodeElement
Returns the first element in the selection.
Returns
Element
offnameStringnamespaceStringcallbackFunction[Event]Selection
Deregisters a callback for an event type.
Provided by extending the EventEmitter 

hx.select('#button').off('click')
hx.select('#button').off('click', 'my-namespace')
hx.select('#button').off('click', handler)
hx.select('#button').off('click', 'my-namespace', handler)
Arguments
nameString
The event type to remove the handler(s) for
namespaceString
The namespace to remove the handler from. 'default' may be supplied to remove just the non namespaced handler. Without this, all namespaces will be removed
callbackFunction[Event]
A specific callback to remove
Returns
Selection
This Selection
onnameStringnamespaceStringcallbackFunctionSelection
Register a callback that will be called whenever an event is emitted under the given name
Provided by extending the EventEmitter 
function handler (event) {
  // do something
}
hx.select('#button').on('click', handler)
hx.select('#button').on('click', 'my-namespace', handler)
Arguments
nameString
The event type to listen out for
namespaceString
The namespace to register the handler under. Namespaces isolate groups of handlers. Handlers can be removed by namespace without affecting handlers in other namespaces. The value "default" is reserved and may not be used as a namespace name.
callbackdataEventData
The function to call when the event occurs
Arguments
dataEventData
The data sent along with the event
Returns
Selection
This Selection
prependelementString / Element / SelectionSelection
Inserts an element at the start of all elements currently selected and returns a new Selection containing the new elements. Use 'div' to append a <div> element for example.
Arguments
elementString / Element / Selection
The element type to prepend, or the element to prepend, or a selection containing an element to prepend.
Returns
Selection
A new Selection containing the new elements
proppropertyStringvalueAnySelection
Sets a property on the Elements selected. 
// will set the className property value to 'myclass'
// for the single element in the selection this will
// return the current selection for chaining
hx.select('#some-id').prop('className', 'myclass')
// will set the className property value to 'myclass'
// for all the elements in the selection this will
// return the current selection for chaining
hx.selectAll('.some-class').prop('className', 'myclass')
Arguments
propertyString
The property to get, or if a value is being supplied the property to set the value of.
valueAny
The value to set the property to.
Returns
Selection
This Selection
proppropertyStringAny / Array[Any]
Gets a property on the Elements selected. 
// will return the className attribute for the selected element
hx.select('#some-id').prop('className')
// will return an array of className attributes for all the selected elements
hx.selectAll('.some-class').prop('className')
Arguments
propertyString
The name of the property to get.
Returns
Any / Array[Any]
The property value or values for a multiple selection
removeArray[Element]
Removes all selected elements from the dom. Returns an array of the removed element.
Returns
Array[Element]
replaceselectionSelection / Array[Selection] / Promise[Selection] / Promise[Array[Selection]]Selection
Replaces this selection in the DOM. 
hx.select('.some-container')
  .replace(hx.div('my-content'))
hx.select('.some-container')
  .replace([
    hx.div('my-content-1'),
    hx.div('my-content-2')
  ])
After these calls, the element selected with hx.select('.some-container') will be removed from the DOM.
Note that this is equivalent to inserting after the current selection and then removing it: 
hx.select('.some-container').insertAfter(hx.div('my-content'))
hx.select('.some-container').remove()
Arguments
selectionSelection / Array[Selection] / Promise[Selection] / Promise[Array[Selection]]
The selection (or array of selections) to replace. If a Promise is provided, the replacement will only happen once the Promise resolves
Returns
Selection
Returns this Selection
selectselectorStringSelection
Returns a new Selection containing the first child element found that matches the css selector provided.
Arguments
selectorString
A CSS selector
Returns
Selection
selectAllselectorStringSelection
Returns a new Selection containing all the child elements found that match the css selector provided.
Arguments
selectorString
A CSS selector
Returns
Selection
setselectionSelection / Array[Selection] / Promise[Selection] / Promise[Array[Selection]]Selection
Sets the children of the selected element. 
hx.select('body')
  .set(hx.div('my-content'))
hx.select('body')
  .set([
    hx.div('my-content-1'),
    hx.div('my-content-2')
  ])
Note that this is equivalent to clearing the childen and adding the new ones: 
hx.select('body')
  .clear()
  .add(hx.div('my-content'))
Arguments
selectionSelection / Array[Selection] / Promise[Selection] / Promise[Array[Selection]]
The selection (or array of selections) to set as children. If a Promise is provided, the content will only be changed when the Promise resolves.
Returns
Selection
Returns this Selection
shallowSelectselectorStringSelection
Returns a new Selection containing the first child element found that matches the css selector provided and is a direct child of the current selection.
Arguments
selectorString
A CSS selector
Returns
Selection
shallowSelectAllselectorStringSelection
Returns a new Selection containing all the child elements found that match the css selector provided and are direct children of the current selection.
Arguments
selectorString
A CSS selector
Returns
Selection
sizeNumber
The number of nodes in the selection.
Returns
Number
stylepropertyStringvalueStringSelection
Sets a style property on the Elements selected. 
// will set the class style property value to 'myclass' for
// the single element in the selection this will return the
// current selection for chaining
hx.select('#some-id').style('background', 'red')
// will set the class style property value to 'myclass' for
// all the elements in the selection this will return the current
// selection for chaining
hx.selectAll('.some-class').style('background', 'red')
Arguments
propertyString
The style property to get, or if a value is being supplied the style property to set the value of.
valueString
The value to set the style property to.
Returns
Selection
This Selection
stylepropertyStringString / Array[String]
Gets a style property on the Elements selected. 
// will return the class style property for the selected element
hx.select('#some-id').style('background')
// will return an array of class style propertys for all the selected elements
hx.selectAll('.some-class').style('background')
Arguments
propertyString
The name of the style property to get the value of.
Returns
String / Array[String]
The style property or properties if this is a multiple selection.
textSelection
Sets text content of all the selected elements.
Shorthand for selection.prop('textContent', value)
textString
The text to use.
Returns
Selection
This Selection
text
Gets the text content of all the selected elements.
Shorthand for selection.prop('textContent')
String / Array[String]
The text content of the selected element, or nodes if this is a multiple selection.
valuevalueStringSelection
Sets the value property for input elements.
Arguments
valueString
The value to set.
Returns
Selection
This Selection
valueString / Array[String]
Gets the value property for input elements.
Returns
String / Array[String]
The value for the selected element, or values if this is a multiple selection.
viewselectorStringtypeStringView
Creates a view on the current selection. See the View type for more information.
Arguments
selectorString
A CSS selector
typeString
The container node type to use. The default is 'div'
Returns
View
widthNumber / Array[Number]
Returns the widths of the elements selected.
Returns
Number / Array[Number]
Functions
hx.detachedtypeStringnamespaceStringSelection
Creates a new detached element, wrapped in a selection.
Arguments
typeString
The tag type, eg 'div'
namespaceString
The namespace to use, eg 'http://www.w3.org/1999/xhtml'
Default: [http://www.w3.org/1999/xhtml]
Returns
Selection
hx.selectselectorElement / StringSelection
Creates a selection from an Element or CSS selector. The selection will contain a single element.
Arguments
selectorElement / String
The Element to select, or a CSS selector to use to find an element.
Returns
Selection
hx.selectAllselectorStringSelection
Creates a selection by finding all elements that match a CSS selector.
Arguments
selectorString
A CSS selector.
Returns
Selection