---
title: "tinymce.dom.DomQuery"
description: "This class mimics most of the jQuery API:  This is whats currently implemented: - Utility functions - DOM traversial - DOM manipulation - Event binding  This is not currently implemented: - Dimension - Ajax - Animation - Advanced chaining"
canonical_url: "https://www.tiny.cloud/docs/tinymce/5/apis/tinymce.dom.domquery/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/apis/tinymce.dom.domquery/index.md"
version: "5"
last_updated: "2024-04-03T05:53:00Z"
tokens: 6351
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../../latest/).
# tinymce.dom.DomQuery

This class mimics most of the jQuery API:  This is whats currently implemented: - Utility functions - DOM traversial - DOM manipulation - Event binding  This is not currently implemented: - Dimension - Ajax - Animation - Advanced chaining

DomQuery has been deprecated in TinyMCE 5.10 and has been marked for removal in TinyMCE 6.0.

## Examples

```javascript
var $ = tinymce.dom.DomQuery;
$('p').attr('attr', 'value').addClass('class');
```

## Summary

### Properties

| Name | Type | Summary | Defined by |
| --- | --- | --- | --- |
| context | `Element` | Context used to create the set. | `DomQuery` |
| length | `Number` | Number of items in the current set. | `DomQuery` |
| selector | `String` | Selector for the current set. | `DomQuery` |

### Constructors

| Name | Summary | Defined by |
| --- | --- | --- |
| [DomQuery()](#DomQuery) | Constructs a new DomQuery instance with the specified selector or context. | `DomQuery` |

### Methods

| Name | Summary | Defined by |
| --- | --- | --- |
| [add()](#add) | Adds new nodes to the set. | `DomQuery` |
| [addClass()](#addClass) | Adds the specified class name to the current set elements. | `DomQuery` |
| [after()](#after) | Adds the specified elements after current set nodes. | `DomQuery` |
| [append()](#append) | Appends the specified node/html or node set to the current set nodes. | `DomQuery` |
| [appendTo()](#appendTo) | Appends the specified set nodes to the specified selector/instance. | `DomQuery` |
| [attr()](#attr) | Sets/gets properties on the elements in the current set. | `DomQuery` |
| [before()](#before) | Adds the specified elements before current set nodes. | `DomQuery` |
| [children()](#children) | Returns all child elements matching the optional selector. | `DomQuery` |
| [clone()](#clone) | Clones all nodes in set. | `DomQuery` |
| [closest()](#closest) | Gets the current node or any parent matching the specified selector. | `DomQuery` |
| [contents()](#contents) | Returns all child nodes matching the optional selector. | `DomQuery` |
| [css()](#css) | Sets/gets styles on the elements in the current set. | `DomQuery` |
| [each()](#each) | Executes the callback function for each item DomQuery collection. If you return false in the callback it will break the loop. | `DomQuery` |
| [each()](#each) | Executes the callback function for each item in array/object. If you return false in the callback it will break the loop. | `DomQuery` |
| [empty()](#empty) | Empties all elements in set. | `DomQuery` |
| [eq()](#eq) | Makes the set equal to the specified index. | `DomQuery` |
| [extend()](#extend) | Extends the specified object with one or more objects. | `DomQuery` |
| [filter()](#filter) | Filters the current set with the specified selector. | `DomQuery` |
| [find()](#find) | Finds elements by the specified selector for each element in set. | `DomQuery` |
| [first()](#first) | Makes the set equal to first element in set. | `DomQuery` |
| [grep()](#grep) | Filters out items from the input array by calling the specified function for each item. If the function returns false the item will be excluded if it returns true it will be included. | `DomQuery` |
| [hasClass()](#hasClass) | Returns true/false if the first item in set has the specified class. | `DomQuery` |
| [hide()](#hide) | Hides all elements in set. | `DomQuery` |
| [html()](#html) | Sets or gets the HTML of the current set or first set node. | `DomQuery` |
| [inArray()](#inArray) | Returns the index of the specified item inside the array. | `DomQuery` |
| [is()](#is) | Returns true/false if the current set items matches the selector. | `DomQuery` |
| [isArray()](#isArray) | Returns true/false if the specified object is an array or not. | `DomQuery` |
| [last()](#last) | Makes the set equal to last element in set. | `DomQuery` |
| [makeArray()](#makeArray) | Creates an array out of an array like object. | `DomQuery` |
| [next()](#next) | Returns a new collection with next sibling of each item in current collection matching the optional selector. | `DomQuery` |
| [nextUntil()](#nextUntil) | Returns a new collection with all next siblings of each item in current collection matching the optional selector. | `DomQuery` |
| [off()](#off) | Unbinds an event with callback function to the elements in set. | `DomQuery` |
| [offset()](#offset) | Returns the offset of the first element in set or sets the top/left css properties of all elements in set. | `DomQuery` |
| [on()](#on) | Binds an event with callback function to the elements in set. | `DomQuery` |
| [parent()](#parent) | Returns a new collection with the parent of each item in current collection matching the optional selector. | `DomQuery` |
| [parents()](#parents) | Returns a new collection with the all the parents of each item in current collection matching the optional selector. | `DomQuery` |
| [parentsUntil()](#parentsUntil) | Returns a new collection with the all the parents until the matching selector/element of each item in current collection matching the optional selector. | `DomQuery` |
| [prepend()](#prepend) | Prepends the specified node/html or node set to the current set nodes. | `DomQuery` |
| [prependTo()](#prependTo) | Prepends the specified set nodes to the specified selector/instance. | `DomQuery` |
| [prev()](#prev) | Returns a new collection with previous sibling of each item in current collection matching the optional selector. | `DomQuery` |
| [prevUntil()](#prevUntil) | Returns a new collection with all previous siblings of each item in current collection matching the optional selector. | `DomQuery` |
| [remove()](#remove) | Removes all nodes in set from the document. | `DomQuery` |
| [removeAttr()](#removeAttr) | Removes attributse on the elements in the current set. | `DomQuery` |
| [removeClass()](#removeClass) | Removes the specified class name to the current set elements. | `DomQuery` |
| [replaceWith()](#replaceWith) | Replaces the nodes in set with the specified content. | `DomQuery` |
| [show()](#show) | Shows all elements in set. | `DomQuery` |
| [slice()](#slice) | Slices the current set. | `DomQuery` |
| [text()](#text) | Sets or gets the text of the current set or first set node. | `DomQuery` |
| [toArray()](#toArray) | Converts the current set to an array. | `DomQuery` |
| [toggleClass()](#toggleClass) | Toggles the specified class name on the current set elements. | `DomQuery` |
| [trigger()](#trigger) | Triggers the specified event by name or event object. | `DomQuery` |
| [trim()](#trim) | Removes whitespace from the beginning and end of a string. | `DomQuery` |
| [unwrap()](#unwrap) | Unwraps all elements by removing the parent element of each item in set. | `DomQuery` |
| [wrap()](#wrap) | Wraps all elements in set with the specified wrapper. | `DomQuery` |
| [wrapAll()](#wrapAll) | Wraps all nodes in set with the specified wrapper. If the nodes are siblings all of them will be wrapped in the same wrapper. | `DomQuery` |
| [wrapInner()](#wrapInner) | Wraps all elements inner contents in set with the specified wrapper. | `DomQuery` |

## Constructors

### DomQuery

```javascript
public constructor function DomQuery(selector: String | Array | DomQuery, context: Document | Element)
```
Constructs a new DomQuery instance with the specified selector or context.

#### Parameters

- `selector (String | Array | DomQuery)` - Optional CSS selector/Array or array like object or HTML string.
- `context (Document | Element)` - Optional context to search in.

## Methods

### add()

```javascript
add(items: Array | tinymce.core.dom.DomQuery, sort: Boolean): tinymce.dom.DomQuery
```
Adds new nodes to the set.

#### Parameters

- `items (Array | DomQuery)` - Array of all nodes to add to set.
- `sort (Boolean)` - Optional sort flag that enables sorting of elements.

#### Return value

- `DomQuery` - New instance with nodes added.

### addClass()

```javascript
addClass(className: String): tinymce.dom.DomQuery
```
Adds the specified class name to the current set elements.

#### Parameters

- `className (String)` - Class name to add.

#### Return value

- `DomQuery` - Current set.

### after()

```javascript
after(content: String | Element | Array | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Adds the specified elements after current set nodes.

#### Parameters

- `content (String | Element | Array | DomQuery)` - Content to add after to each element in set.

#### Return value

- `DomQuery` - Current set.

### append()

```javascript
append(content: String | Element | Array | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Appends the specified node/html or node set to the current set nodes.

#### Parameters

- `content (String | Element | Array | DomQuery)` - Content to append to each element in set.

#### Return value

- `DomQuery` - Current set.

### appendTo()

```javascript
appendTo(val: String | Element | Array | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Appends the specified set nodes to the specified selector/instance.

#### Parameters

- `val (String | Element | Array | DomQuery)` - Item to append the current set to.

#### Return value

- `DomQuery` - Current set with the appended nodes.

### attr()

```javascript
attr(name: String | Object, value: String): tinymce.dom.DomQuery | String
```
Sets/gets properties on the elements in the current set.

#### Parameters

- `name (String | Object)` - Name of property to get or an object with properties to set.
- `value (String)` - Optional value to set.

#### Return value

- `DomQuery` - Current set or the specified property when only the name is specified.
- `String` - Current set or the specified property when only the name is specified.

### before()

```javascript
before(content: String | Element | Array | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Adds the specified elements before current set nodes.

#### Parameters

- `content (String | Element | Array | DomQuery)` - Content to add before to each element in set.

#### Return value

- `DomQuery` - Current set.

### children()

```javascript
children(node: Element | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Returns all child elements matching the optional selector.

#### Parameters

- `node (Element | DomQuery)` - Node to match the elements against.

#### Return value

- `DomQuery` - New DomQuery instance with all matching elements.

### clone()

```javascript
clone(): tinymce.dom.DomQuery
```
Clones all nodes in set.

#### Return value

- `DomQuery` - Set with cloned nodes.

### closest()

```javascript
closest(selector: String | Element | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Gets the current node or any parent matching the specified selector.

#### Parameters

- `selector (String | Element | DomQuery)` - Selector or element to find.

#### Return value

- `DomQuery` - Set with closest elements.

### contents()

```javascript
contents(node: Element | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Returns all child nodes matching the optional selector.

#### Parameters

- `node (Element | DomQuery)` - Node to get the contents of.

#### Return value

- `DomQuery` - New DomQuery instance with all matching elements.

### css()

```javascript
css(name: String | Object, value: String): tinymce.dom.DomQuery | String
```
Sets/gets styles on the elements in the current set.

#### Parameters

- `name (String | Object)` - Name of style to get or an object with styles to set.
- `value (String)` - Optional value to set.

#### Return value

- `DomQuery` - Current set or the specified style when only the name is specified.
- `String` - Current set or the specified style when only the name is specified.

### each()

```javascript
each(callback: function): tinymce.dom.DomQuery
```
Executes the callback function for each item DomQuery collection. If you return false in the
callback it will break the loop.

#### Parameters

- `callback (function)` - Callback function to execute for each item.

#### Return value

- `DomQuery` - Current set.

### each()

```javascript
each(obj: Object, callback: function)
```
Executes the callback function for each item in array/object. If you return false in the
callback it will break the loop.

#### Parameters

- `obj (Object)` - Object to iterate.
- `callback (function)` - Callback function to execute for each item.

### empty()

```javascript
empty(): tinymce.dom.DomQuery
```
Empties all elements in set.

#### Return value

- `DomQuery` - Current set with the empty nodes.

### eq()

```javascript
eq(index: Number): tinymce.dom.DomQuery
```
Makes the set equal to the specified index.

#### Parameters

- `index (Number)` - Index to set it equal to.

#### Return value

- `DomQuery` - Single item set.

### extend()

```javascript
extend(target: Object, object: Object..): Object
```
Extends the specified object with one or more objects.

#### Parameters

- `target (Object)` - Target object to extend with new items.
- `object (Object..)` - Object to extend the target with.

#### Return value

- `Object` - Extended input object.

### filter()

```javascript
filter(selector: String | function): tinymce.dom.DomQuery
```
Filters the current set with the specified selector.

#### Parameters

- `selector (String | function)` - Selector to filter elements by.

#### Return value

- `DomQuery` - Set with filtered elements.

### find()

```javascript
find(selector: String): tinymce.dom.DomQuery
```
Finds elements by the specified selector for each element in set.

#### Parameters

- `selector (String)` - Selector to find elements by.

#### Return value

- `DomQuery` - Set with matches elements.

### first()

```javascript
first(): tinymce.dom.DomQuery
```
Makes the set equal to first element in set.

#### Return value

- `DomQuery` - Single item set.

### grep()

```javascript
grep(array: Array, callback: function): Array
```
Filters out items from the input array by calling the specified function for each item.
If the function returns false the item will be excluded if it returns true it will be included.

#### Examples

```javascript
// Filter out some items, this will return an array with 4 and 5
var items = DomQueryBuilder.grep([1, 2, 3, 4, 5], function(v) {return v > 3;});
```

#### Parameters

- `array (Array)` - Array of items to loop though.
- `callback (function)` - Function to call for each item. Include/exclude depends on it’s return value.

#### Return value

- `Array` - New array with values imported and filtered based in input.

### hasClass()

```javascript
hasClass(className: String): Boolean
```
Returns true/false if the first item in set has the specified class.

#### Examples

```javascript
// To check if the first 'a' element has the class 'anchor':
tinymce.dom.DomQuery('a').hasClass('anchor')
```

#### Parameters

- `className (String)` - Class name to check for.

#### Return value

- `Boolean` - True/false if the set has the specified class.

### hide()

```javascript
hide(): tinymce.dom.DomQuery
```
Hides all elements in set.

#### Return value

- `DomQuery` - Current set.

### html()

```javascript
html(value: String): tinymce.dom.DomQuery | String
```
Sets or gets the HTML of the current set or first set node.

#### Parameters

- `value (String)` - Optional innerHTML value to set on each element.

#### Return value

- `DomQuery` - Current set or the innerHTML of the first element.
- `String` - Current set or the innerHTML of the first element.

### inArray()

```javascript
inArray(item: Object, array: Array): Number
```
Returns the index of the specified item inside the array.

#### Parameters

- `item (Object)` - Item to look for.
- `array (Array)` - Array to look for item in.

#### Return value

- `Number` - Index of the item or -1.

### is()

```javascript
is(selector: String): Boolean
```
Returns true/false if the current set items matches the selector.

#### Parameters

- `selector (String)` - Selector to match the elements against.

#### Return value

- `Boolean` - True/false if the current set matches the selector.

### isArray()

```javascript
isArray(array: Object): Boolean
```
Returns true/false if the specified object is an array or not.

#### Parameters

- `array (Object)` - Object to check if it’s an array or not.

#### Return value

- `Boolean` - True/false if the object is an array.

### last()

```javascript
last(): tinymce.dom.DomQuery
```
Makes the set equal to last element in set.

#### Return value

- `DomQuery` - Single item set.

### makeArray()

```javascript
makeArray(object: Object): Array
```
Creates an array out of an array like object.

#### Parameters

- `object (Object)` - Object to convert to array.

#### Return value

- `Array` - Array produced from object.

### next()

```javascript
next(node: Element | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Returns a new collection with next sibling of each item in current collection matching the optional selector.

#### Parameters

- `node (Element | DomQuery)` - Node to match the next element against.

#### Return value

- `DomQuery` - New DomQuery instance with all matching elements.

### nextUntil()

```javascript
nextUntil(node: Element | tinymce.dom.DomQuery, until: String | Element | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Returns a new collection with all next siblings of each item in current collection matching the optional selector.

#### Parameters

- `node (Element | DomQuery)` - Node to find next siblings on.
- `until (String | Element | DomQuery)` - Until the matching selector or element.

#### Return value

- `DomQuery` - New DomQuery instance with all matching elements.

### off()

```javascript
off(name: String, callback: function): tinymce.dom.DomQuery
```
Unbinds an event with callback function to the elements in set.

#### Parameters

- `name (String)` - Optional name of the event to bind.
- `callback (function)` - Optional callback function to execute when the event occurs.

#### Return value

- `DomQuery` - Current set.

### offset()

```javascript
offset(offset: Object): Object | tinymce.dom.DomQuery
```
Returns the offset of the first element in set or sets the top/left css properties of all elements in set.

#### Parameters

- `offset (Object)` - Optional offset object to set on each item.

#### Return value

- `Object` - Returns the first element offset or the current set if you specified an offset.
- `DomQuery` - Returns the first element offset or the current set if you specified an offset.

### on()

```javascript
on(name: String, callback: function): tinymce.dom.DomQuery
```
Binds an event with callback function to the elements in set.

#### Parameters

- `name (String)` - Name of the event to bind.
- `callback (function)` - Callback function to execute when the event occurs.

#### Return value

- `DomQuery` - Current set.

### parent()

```javascript
parent(node: Element | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Returns a new collection with the parent of each item in current collection matching the optional selector.

#### Parameters

- `node (Element | DomQuery)` - Node to match parents against.

#### Return value

- `DomQuery` - New DomQuery instance with all matching parents.

### parents()

```javascript
parents(node: Element | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Returns a new collection with the all the parents of each item in current collection matching the optional selector.

#### Parameters

- `node (Element | DomQuery)` - Node to match parents against.

#### Return value

- `DomQuery` - New DomQuery instance with all matching parents.

### parentsUntil()

```javascript
parentsUntil(node: Element | tinymce.dom.DomQuery, until: String | Element | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Returns a new collection with the all the parents until the matching selector/element
of each item in current collection matching the optional selector.

#### Parameters

- `node (Element | DomQuery)` - Node to find parent of.
- `until (String | Element | DomQuery)` - Until the matching selector or element.

#### Return value

- `DomQuery` - New DomQuery instance with all matching parents.

### prepend()

```javascript
prepend(content: String | Element | Array | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Prepends the specified node/html or node set to the current set nodes.

#### Parameters

- `content (String | Element | Array | DomQuery)` - Content to prepend to each element in set.

#### Return value

- `DomQuery` - Current set.

### prependTo()

```javascript
prependTo(val: String | Element | Array | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Prepends the specified set nodes to the specified selector/instance.

#### Parameters

- `val (String | Element | Array | DomQuery)` - Item to prepend the current set to.

#### Return value

- `DomQuery` - Current set with the prepended nodes.

### prev()

```javascript
prev(node: Element | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Returns a new collection with previous sibling of each item in current collection matching the optional selector.

#### Parameters

- `node (Element | DomQuery)` - Node to match the previous element against.

#### Return value

- `DomQuery` - New DomQuery instance with all matching elements.

### prevUntil()

```javascript
prevUntil(node: Element | tinymce.dom.DomQuery, until: String | Element | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Returns a new collection with all previous siblings of each item in current collection matching the optional selector.

#### Parameters

- `node (Element | DomQuery)` - Node to find previous siblings on.
- `until (String | Element | DomQuery)` - Until the matching selector or element.

#### Return value

- `DomQuery` - New DomQuery instance with all matching elements.

### remove()

```javascript
remove(): tinymce.dom.DomQuery
```
Removes all nodes in set from the document.

#### Return value

- `DomQuery` - Current set with the removed nodes.

### removeAttr()

```javascript
removeAttr(name: String | Object): tinymce.dom.DomQuery | String
```
Removes attributse on the elements in the current set.

#### Parameters

- `name (String | Object)` - Name of attribute to remove.

#### Return value

- `DomQuery` - Current set.
- `String` - Current set.

### removeClass()

```javascript
removeClass(className: String): tinymce.dom.DomQuery
```
Removes the specified class name to the current set elements.

#### Parameters

- `className (String)` - Class name to remove.

#### Return value

- `DomQuery` - Current set.

### replaceWith()

```javascript
replaceWith(content: String | Element | Array | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Replaces the nodes in set with the specified content.

#### Parameters

- `content (String | Element | Array | DomQuery)` - Content to replace nodes with.

#### Return value

- `DomQuery` - Set with replaced nodes.

### show()

```javascript
show(): tinymce.dom.DomQuery
```
Shows all elements in set.

#### Return value

- `DomQuery` - Current set.

### slice()

```javascript
slice(start: Number, end: Number): tinymce.dom.DomQuery
```
Slices the current set.

#### Parameters

- `start (Number)` - Start index to slice at.
- `end (Number)` - Optional end index to end slice at.

#### Return value

- `DomQuery` - Sliced set.

### text()

```javascript
text(value: String): tinymce.dom.DomQuery | String
```
Sets or gets the text of the current set or first set node.

#### Parameters

- `value (String)` - Optional innerText value to set on each element.

#### Return value

- `DomQuery` - Current set or the innerText of the first element.
- `String` - Current set or the innerText of the first element.

### toArray()

```javascript
toArray(): Array
```
Converts the current set to an array.

#### Return value

- `Array` - Array of all nodes in set.

### toggleClass()

```javascript
toggleClass(className: String, state: Boolean): tinymce.dom.DomQuery
```
Toggles the specified class name on the current set elements.

#### Parameters

- `className (String)` - Class name to add/remove.
- `state (Boolean)` - Optional state to toggle on/off.

#### Return value

- `DomQuery` - Current set.

### trigger()

```javascript
trigger(name: String | Object): tinymce.dom.DomQuery
```
Triggers the specified event by name or event object.

#### Parameters

- `name (String | Object)` - Name of the event to trigger or event object.

#### Return value

- `DomQuery` - Current set.

### trim()

```javascript
trim(str: String): String
```
Removes whitespace from the beginning and end of a string.

#### Parameters

- `str (String)` - String to remove whitespace from.

#### Return value

- `String` - New string with removed whitespace.

### unwrap()

```javascript
unwrap(): tinymce.dom.DomQuery
```
Unwraps all elements by removing the parent element of each item in set.

#### Return value

- `DomQuery` - Set with unwrapped nodes.

### wrap()

```javascript
wrap(content: String | Element | Array | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Wraps all elements in set with the specified wrapper.

#### Parameters

- `content (String | Element | Array | DomQuery)` - Content to wrap nodes with.

#### Return value

- `DomQuery` - Set with wrapped nodes.

### wrapAll()

```javascript
wrapAll(content: String | Element | Array | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Wraps all nodes in set with the specified wrapper. If the nodes are siblings all of them
will be wrapped in the same wrapper.

#### Parameters

- `content (String | Element | Array | DomQuery)` - Content to wrap nodes with.

#### Return value

- `DomQuery` - Set with wrapped nodes.

### wrapInner()

```javascript
wrapInner(content: String | Element | Array | tinymce.dom.DomQuery): tinymce.dom.DomQuery
```
Wraps all elements inner contents in set with the specified wrapper.

#### Parameters

- `content (String | Element | Array | DomQuery)` - Content to wrap nodes with.

#### Return value

- `DomQuery` - Set with wrapped nodes.