## Basic Usage ### Dependencies DOM Comparator depends on jQuery (version `1.8+` or `2.0+`) and Underscore (version `1.5+`). Make sure you include them before including DOM Comparator source files (by using `bower` or fetching from a CDN). After including `dist/dom-comparator.js` in your project, the basic usage involves just two steps: creating an instance of `VWO.DOMComparator` and calling the `compare()` function on the instance. ### Constructor The constructor of `VWO.DOMComparator` can be called using `new VWO.DOMComparator(options)` or `VWO.DOMComparator.create(options)`. The `options` can take three kinds of parameters: * Pass the strings to compare as `stringA` and `stringB`. ```js var comparator = VWO.DOMComparator.create({ stringA: '
some markup
', stringB: '
some markup
' }); ``` * Pass the elements directly as `elA` and `elB`. ```js var div1 = document.createElement('div'); div1.innerHTML = '

some text

'; var div2 = document.createElement('div'); div2.innerHTML = '

some other text

'; var comparator = VWO.DOMComparator.create({ elA: div1, elB: div2 }); ``` If you're using jQuery, use `get(0)` to get the elements and pass to the constructor. ```js var comparator = VWO.DOMComparator.create({ elA: $('
some text
').get(0), elB: $('
some text
').get(0) }); ``` * Finally, you could also pass instances of `VWO.DOMNode` as `nodeA` and `nodeB`. The above two methods define these properties anyway. This is how you'd do it: ```js var comparator = VWO.DOMComparator.create({ nodeA: VWO.DOMNode.create({ el: $('
some text
').get(0) }), nodeB: VWO.DOMNode.create({ el: $('
some text
').get(0) }) }); ``` ### Comparison Comparison is as easy as calling the `compare` function on the `VWO.DOMComparator` instance. The output returned is an array of operations. ```js var output = comparator.compare(); ``` Each of the operations are instances of `VWO.Operation` which hold three properties: * `name`: The name of the operation to apply. See [supported operations](supported-operations.html) for the list of operations that the output format supports. * `selectorPath`: The unique CSS selector path that corresponds to the given element. * `content`: Depending on the operation, the content key contains various properties / additional information about that operation. The operations are meant to be applied in a serial order, as an operation might be dependent on the one preceding it.