## Supported Operations
The output of `VWO.DOMComparator`'s instance's `compare` function supports 8 kinds of operations. 5 of these operations: `attr`, `removeAttr`, `css`, `removeCss` and `changeText` are operations that do not involve any DOM manipulations. The remaining 3 operations - `insertNode`, `deleteNode` and `rearrange` are DOM modifying operations. These operations are described below with suitable examples:
### 1. attr
Identifies addition or change of attribute(s) on a particular element. The `content` property of the returned `VWO.Operation` object is a hashmap of attributes to add or change to the element identified by `selectorPath`.
```js
var result = VWO.DOMComparator.create({
stringA: 'Add to Cart',
stringB: 'Add to Cart'
});
expect(result[0]).toEqual({
name: 'attr',
selectorPath: 'A:first-child',
content: {
'href': '#add_to_cart',
'data-custom': 'hello',
'target': '_blank'
}
});
```
### 2. removeAttr
Identifies removal of attributes from an element. The `content` property of the returned object is a key-value pair of the attributes removed from the element identified by `selectorPath`.
```js
var result = VWO.DOMComparator.create({
stringA: 'Add to Cart',
stringB: 'Add to Cart'
});
expect(result[0]).toEqual({
name: 'removeAttr',
selectorPath: 'A:first-child',
content: {
'data-custom': 'hello',
'target': '_blank'
}
});
```
### 3. css
Identifies addition or change of css styles(s) on a particular element. The `content` property of the returned `VWO.Operation` object is a hashmap of css styles to add or change to the element identified by `selectorPath`.
```js
var result = VWO.DOMComparator.create({
stringA: 'Add to Cart',
stringB: 'Add to Cart'
});
expect(result[0]).toEqual({
name: 'css',
selectorPath: 'A:first-child',
content: {
'font-weight': 'bold',
'color': 'red'
}
});
```
### 4. removeCss
Identifies removal of css styles from an element. The `content` property of the returned object is a key-value pair of the css styles removed from the element identified by `selectorPath`.
```js
var result = VWO.DOMComparator.create({
stringA: 'Add to Cart',
stringB: 'Add to Cart'
});
expect(result[0]).toEqual({
name: 'removeAttr',
selectorPath: 'A:first-child',
content: {
'font-weight': 'bold',
'color': 'red'
}
});
```
### 5. changeText
If a text node in a markup is modified, and it appears as changed in `stringB` from `stringA`, it is detected as a `changeText` operation. The `content` property contains three sub-properties: `text`, `parentSelectorPath` and `indexInParent`. The `content.text` key contains the new text, `content.parentSelectorPath` is the selector path of the parent element of the text node modified, and `content.indexInParent` contains the index of the text node in the parent container identified by the given selector path.
```js
var result = VWO.DOMComparator.create({
stringA: 'Add to Cart',
stringB: 'Add to My Cart'
});
expect(result[0]).toEqual({
name: 'changeText',
content: {
text: 'Add to My Cart',
parentSelectorPath: 'A:first-child',
indexInParent: 0
}
});
```
Here's a little complex example:
```js
var result = VWO.DOMComparator.create({
stringA: 'The quick brown fox jumped over the lazy dog.
',
stringB: 'The quick brown wolf jumped over the lazy dog.
'
});
expect(result[0]).toEqual({
name: 'changeText',
content: {
text: ' wolf jumpled over the ',
parentSelectorPath: 'P:first-child',
indexInParent: 2
}
});
```
### 6. insertNode
Indicates that a node that that was not present in the initial markup has been inserted in the final markup. The `content` property for this operation contains three properties: `html`, `parentSelectorPath` and `indexInParent`. The `content.html` contains the new markup to be inserted. The `content.parentSelectorPath` contains the selector path of the container in which this markup needs to be inserted, and `content.indexInParent` key contains the index of the existing element *before* which the new element needs to be inserted.
```js
var result = VWO.DOMComparator.create({
stringA: '',
stringB: ''
});
expect(result[0]).toEqual({
name: 'insertNode',
content: {
html: "green",
parentSelectorPath: "UL:first-child",
indexInParent: 2
}
});
```
### 7. deleteNode
Indicates that a node that was present in the initial markup has been removed from the final markup. The `content` property contains two keys: `parentSelectorPath` and `indexInParent`, the combination of which indicates the position of the element to be deleted.
```js
var result = VWO.DOMComparator.create({
stringA: '',
stringB: ''
});
expect(result[0]).toEqual({
name: 'insertNode',
content: {
parentSelectorPath: "UL:first-child",
indexInParent: 2
}
});
```
### 8. rearrange
Indicates that an element has been moved from one position in the initial DOM to another position in the final DOM. The `content` property
contains four keys: `parentSelectorPath` and `indexInParent` identify the new position of the element and `oldParentSelectorPath` and `oldIndexInParent` identify the old position of the element.
```js
var result = VWO.DOMComparator.create({
stringA: '',
stringB: ''
});
// yellow has been moved from the second list to the first.
expect(result[0]).toEqual({
name: 'rearrange',
content: {
parentSelectorPath: 'UL:first-child',
indexInParent: 2,
oldParentSelectorPath: 'UL:first-child + UL',
oldIndexInParent: 1
}
});
```