DOMQuery
Classes
- DomQuery :
Array.<Element> Sort of like a diet, caffeine-free jQuery. Wrapper for Sizzle library with additional methods for the Pendo Agent. Use pendo.Sizzle for customer-defined selectors. Augmented Element[] used to query and alter DOM nodes.
Functions
- addClass(classNames) ⇒
DomQuery Iterate over each element and add each class name.
- append(selector) ⇒
DomQuery For the first element in this list, append each element specified by the selector argument to it.
- appendTo(selector) ⇒
DomQuery Iterate over each element and append the element to the first element in the results from the passed in selector.
- attr(attrName, attrValue) ⇒
DomQuery Iterate over each element and set the attribute name to the specified value
- closest(selector, demarcation) ⇒
DomQuery Find the closest parent element that matches the specified CSS selector for the first element in this list.
- css(styles) ⇒
DomQuery Iterate over each element and apply the styles object.
- each(callback) ⇒
DomQuery Iterate over each element in the DomQuery list and call the provide callback function passing in the the element as the argument.
- focus() ⇒
DomQuery For each element in the list, call the element's focus method if it exists
- getParent() ⇒
element Return the parent node of the first element in this list
- hasClass(classNames) ⇒
Boolean Iterate over each element and checks for each class name. Returns true if all elements have each classname.
- height(height) ⇒
DomQuery Set the height or unset the height for the first element in the list
- html(htmlString) ⇒
DomQuery Iterate over each element in the DomQuery list and create and append the Elements represented by the HTML string provided.
- insertBefore(selector) ⇒
DomQuery For the first element in this list, insert the first element from the selector before it in parent element's child nodes list.
- prepend(selector) ⇒
DomQuery Add all children from the selector as top most children of the first element in this list
- prependTo(selector) ⇒
DomQuery Add all elements in the list as top most child nodes of the first element found for the given selector.
- remove() ⇒
DomQuery Iterate over each element and remove it from the DOM.
- removeClass(classNames) ⇒
DomQuery Iterate over each element and remove each class name.
- text(content) ⇒
DomQuery Iterate over each element in the DomQuery list and add the text provided as innerText on the element.
- toggleClass(classNames) ⇒
DomQuery Iterate over each element and toggle each class name on or off depending on the the current state of the element.
- width(width) ⇒
DomQuery Set the width or unset the width for the first element in the list
DomQuery : Array.<Element>
Sort of like a diet, caffeine-free jQuery. Wrapper for Sizzle library with additional methods for the Pendo Agent. Use pendo.Sizzle for customer-defined selectors. Augmented Element[] used to query and alter DOM nodes.
Kind: global class
Category: DOMQuery
Access: public
addClass(classNames) ⇒ DomQuery
Iterate over each element and add each class name.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| classNames | String | Space separated string of classnames. |
Example
pendo.dom('div.foo').addClass('adds each word as a class')
append(selector) ⇒ DomQuery
For the first element in this list, append each element specified by the selector argument to it.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| selector | String | CSS selector to identify the target child element(s) |
Example
pendo.dom('div.foo').append('span.bar')
appendTo(selector) ⇒ DomQuery
Iterate over each element and append the element to the first element in the results from the passed in selector.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| selector | String | CSS selector to identify the target parent element |
Example
pendo.dom('div.foo').appendTo('div.parent')
attr(attrName, attrValue) ⇒ DomQuery
Iterate over each element and set the attribute name to the specified value
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| attrName | String | Name of attribute to set |
| attrValue | String | Value of attribute to set |
Example
pendo.dom('div.foo').attr('data-foo', 'bar')
closest(selector, demarcation) ⇒ DomQuery
Find the closest parent element that matches the specified CSS selector for the first element in this list.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| selector | String | CSS selector for element to find |
| demarcation | String | CSS selector for where to stop looking |
Example
pendo.dom('div.foo').closest('.bar')
Example
dom('div.foo').closest('.bar', '.content-area')
css(styles) ⇒ DomQuery
Iterate over each element and apply the styles object.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| styles | Object | Object containing style attributes names and values |
Example
pendo.dom('div.foo').css({height: '100px', width: '50px'}
each(callback) ⇒ DomQuery
Iterate over each element in the DomQuery list and call the provide callback function passing in the the element as the argument.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| callback | function | The callback to be called for each element in the list |
Example
pendo.dom('div.foo').each((elem) => console.log('elem.id is', elem.id))
focus() ⇒ DomQuery
For each element in the list, call the element's focus method if it exists
Kind: global function
Category: DOMQuery
Access: public
Example
pendo.dom('div.foo').focus()
getParent() ⇒ element
Return the parent node of the first element in this list
Kind: global function
Category: DOMQuery
Access: public
Example
var parent = pendo.dom('div.foo').getParent()
hasClass(classNames) ⇒ Boolean
Iterate over each element and checks for each class name. Returns true if all elements have each classname.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| classNames | String | Space separated string of classnames. |
Example
var allHaveClass = pendo.dom('div.foo').hasClass('check for classes')
height(height) ⇒ DomQuery
Set the height or unset the height for the first element in the list
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| height | Number | The new height to set. Undefined will remove the height allow it to auto determined. |
Example
pendo.dom('div.foo').height(100)
Example
pendo.dom('div.foo).height()
html(htmlString) ⇒ DomQuery
Iterate over each element in the DomQuery list and create and append the Elements represented by the HTML string provided.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| htmlString | String | String representing html to be created as dom Elements for each of the Elements in the list. |
Example
pendo.dom('div.foo').html('<span>hello there</span>');
insertBefore(selector) ⇒ DomQuery
For the first element in this list, insert the first element from the selector before it in parent element's child nodes list.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| selector | String | CSS selector for the element to be inserted before this element |
Example
pendo.dom('div.foo').insertBefore('div.beforeFoo')
prepend(selector) ⇒ DomQuery
Add all children from the selector as top most children of the first element in this list
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| selector | String | CSS selector to identify top most child element(s) |
Example
pendo.dom('div.foo').prepend('div.new-first-child')
prependTo(selector) ⇒ DomQuery
Add all elements in the list as top most child nodes of the first element found for the given selector.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| selector | String | CSS selector to identify the target parent element |
Example
pendo.dom('div.foo').prependTo('div.parent')
remove() ⇒ DomQuery
Iterate over each element and remove it from the DOM.
Kind: global function
Category: DOMQuery
Access: public
Example
pendo.dom('div.foo').remove()
removeClass(classNames) ⇒ DomQuery
Iterate over each element and remove each class name.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| classNames | String | Space separated string of classnames. |
Example
pendo.dom('div.foo').removeClass('removes each word')
text(content) ⇒ DomQuery
Iterate over each element in the DomQuery list and add the text provided as innerText on the element.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| content | String | String to be added as innerText |
Example
pendo.dom('div.foo').text('hello there');
toggleClass(classNames) ⇒ DomQuery
Iterate over each element and toggle each class name on or off depending on the the current state of the element.
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| classNames | String | Space separated string of classnames. |
Example
pendo.dom('div.foo').toggleClass('adds or removes each class')
width(width) ⇒ DomQuery
Set the width or unset the width for the first element in the list
Kind: global function
Category: DOMQuery
Access: public
| Param | Type | Description |
|---|---|---|
| width | Number | The new width to set. Undefined will remove the width allow it to auto determined. |
Example
pendo.dom('div.foo').width(100)
Example
pendo.dom('div.foo).width()