## What is DOM Comparator?
DOM Comparator is a library that, simply put, compares two strings of DOM nodes (which are called `stringA` and `stringB`), and returns an output containing the minimal number of steps that must be taken (like attribute changes, style changes, text changes and DOM manipulation) to convert `stringA` into `stringB`.
The output returned by DOM Comparator is an array of `VWO.Operation` objects, which can also be expressed as jQuery code. Here's a simple example:
```js
var stringA = '';
var stringB = '';
// Compare the two strings
var result = VWO.DOMComparator.create({
stringA: stringA,
stringB: stringB
});
// Expect an array of VWO.Operation objects to be returned.
expect(result).toEqual(jasmine.any(Array));
expect(result[0]).toEqual(jasmine.any(VWO.Operation));
// Expect the first operation to be a 'removeAttr' operation.
expect(result[0].name).toEqual('removeAttr');
// The operation is on an element identified by the following selector path
expect(result[0].selectorPath).toEqual('UL:first-child > LI:first-child');
// With below content
expect(result[0].content).toEqual({class: 'active'});
```
### Motivation
One of the core components of our A/B testing software - [Visual Website Optimizer](https://vwo.com) is the Editor. It allows you to make changes to any website on the fly. Assuming the target website has a small snippet of VWO SmartCode (Javascript) inserted, the changes made by the user are applied when the A/B test is run. These changes are little snippets of jQuery operations that are applied on the client-end.
One of the major problems faced when applying such changes that they did not regard for dynamic content that might have been rendered by the client's website's backend. Let us consider a simple example:
Imagine somebody wanting to run an A/B test on all the product pages of an eCommerce website. He wants to modify the "Buy Now" button on all such pages and make it appear bigger and bolder, so that it captures the end-user's attention better. He navigates to some product page, selects the button and tries to edit it. Assume that that button has markup that looks like below:
```html
Add to Cart
```
The Editor component of Visual Website Optimizer provides an "Edit" operation, that opens up a rich text editor for the user to make changes to any element with ease. Assuming, he makes the text of the button bolder and changes the color to a bright red, here's what the resulting markup would look like:
```html
Add to Cart
```
Internally, an Edit operation is identified by the element the operation is applied on, and the new markupprovided by the user, which in this case is the above code. It means that if a Buy Now button is found on any page, it will be replaced with the above code. The jQuery code for such an operation would look something like this:
```js
// A unique selector path to identify the element
var selector = '#product_description > P:first-child + P > A:first-child';
$(selector).replaceWith('Add to Cart');
```
Notice how this would not only add the styles to that element, but also change its `href` to always execute `addToCart(16);` regardless of the product page the user is on. Essentially, the dynamic content rendered by the client's backend has now been replaced with static content.
### This is where DOM Comparator comes in
With DOM Comparator in place, the initial markup of the Edit operation above will be compared with the final one, and a differencewould be returned. The difference would contain the minimal changes necessary to be made to the target element, thereby impacting dynamic content as less as possible.
For the above example, here's what the list of resulting operations would look like:
```json
[{"name":"css","selectorPath":"#product_description > P:first-child + P > A:first-child","content":{"font-weight":"bold","color":"red"}}]
```
The jQuery code would look like this:
```js
// A unique selector path to identify the element
var selector = '#product_description > P:first-child + P > A:first-child';
$(selector).css({'font-weight': 'bold', 'color': 'red'});
```
### Supported Operations
Below is the list of operations supported by DOM Comparator's output:
* **Insert Node:** Identifies the insertion of a new node in the final markup.
* **Delete Node:** Identifies the deletion of a node in the initial markup.
* **Rearrange:** Identifies rearrangement of an element within a parent container to a different position within the same or a different parent container.
* **Change Text:** Identifies a simple text change.
* **CSS:** Identifies addition of new styles to an element.
* **Remove CSS:** Identifies removal of existing styles from an element.
* **Attr:** Identifies addition of new attributes to an element.
* **Remove Attr:** Identifies removal of existing attributes from an element.
For further explanation on the operations, [click here](supported-operations.html).