# dom-compare
> Library to compare two DOM trees
Latest version **0.6.0** (published 2019-10-14) · 0 weekly downloads
## Install
```sh
npm install dom-compare
pnpm add dom-compare
yarn add dom-compare
bun add dom-compare
```
Provides the command `domcompare`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.6.0 |
| Published | 2019-10-14 |
| First published | 2013-04-13 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | * |
| Dependencies | 3 |
| Unpacked size | 63.4 KB |
| Known vulnerabilities | 0 (+16 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 83 |
| Author | Oleg Elifantiev |
| Maintainers | olegas |
| Keywords | dom, comparison |
## Links
- npm: https://www.npmjs.com/package/dom-compare
- Repository: https://github.com/Olegas/dom-compare
- Homepage: https://github.com/Olegas/dom-compare#readme
- Issues: https://github.com/Olegas/dom-compare/issues
- npm.io page: https://npm.io/package/dom-compare
## Dependencies (3)
- [colors](https://npm.io/package/colors.md) 0.6.2
- [xmldom](https://npm.io/package/xmldom.md) 0.1.19
- [argparse](https://npm.io/package/argparse.md) ^1.0.10
## Alternatives
- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads
## Recent versions
- 0.6.0 (latest) — 2019-10-14
- 0.5.1 — 2019-09-21
- 0.5.0 — 2019-09-21
- 0.4.0 — 2019-09-05
- 0.3.4 — 2019-02-07
- 0.3.3 — 2019-02-07
- 0.3.2 — 2018-08-26
- 0.3.1 — 2017-05-01
- 0.3.0 — 2017-04-27
- 0.2.1 — 2015-04-25
- 0.2.0 — 2013-07-23
- 0.1.1 — 2013-04-13
- 0.1.0 — 2013-04-13
## README
dom-compare
===========
[](https://travis-ci.org/Olegas/dom-compare)
[](https://coveralls.io/r/Olegas/dom-compare)
[](http://badge.fury.io/js/dom-compare)
NodeJS module to compare two DOM-trees
* [DOM Comparison](#dom-comparison)
* [Comparison options](#comparison-options)
* [Comments comparison](#comments-comparison)
* [Whitespace comparison](#whitespace-comparison)
* [Cli utility](#cli-utility)
* [DOM Canonic Form](#dom-canonic-form)
Works with Node.JS v0.10+
DOM Comparison
--------------
Consider two documents. Expected:
```xml
text content
```
and actual one:
```xml
text content
```
One can compare them, get the result (is them equals, or not), and get extended report (why them are different).
```javascript
var compare = require('dom-compare').compare,
reporter = require('dom-compare').GroupingReporter,
expected = ..., // expected DOM tree
actual = ..., // actual one
result, diff, groupedDiff;
// compare to DOM trees, get a result object
result = compare(expected, actual);
// get comparison result
console.log(result.getResult()); // false cause' trees are different
// get all differences
diff = result.getDifferences(); // array of diff-objects
// differences, grouped by node XPath
groupedDiff = reporter.getDifferences(result); // object, key - node XPATH, value - array of differences (strings)
// string representation
console.log(reporter.report(result));
```
Diff-object has a following form:
```javascript
{
node: "/document/element",
message: "Attribute 'attribute': expected value '10' instead of '100'";
}
```
By using `GroupingReporter` one can get a result of a following type
```javascript
{
'/document/element': [
"Attribute 'attribute': expected value '10' instead of '100'",
"Extra attribute 'attributeX'"
]
}
```
### Comparison options
Comparison function can take a third argument with options like this:
```javascript
var options = {
stripSpaces: true,
compareComments: true,
collapseSpaces: true,
normalizeNewlines: true
};
result = compare(expected, actual, options);
```
#### Comments comparison
By default, all comments are ignored. Set `compareComments` options to `true` to compare them too.
#### Whitespace comparison
By default, all text nodes (text, CDATA, comments if enabled as mentioned above) compared with respect
to leading, trailing, and internal whitespaces.
Set `stripSpaces` option to `true` to automatically strip spaces in text and comment nodes. This option
doesn't change the way CDATA sections is compared, they are always compared with respect to whitespaces.
Set `collapseSpaces` option to `true` to automatically collapse all spaces in text and comment nodes.
This option doesn't change the way CDATA sections is compared, they are always compared with respect to
whitespaces.
Set `normalizeNewlines` option to `true` to automatically normalize new line characters in text,
comment, and CDATA nodes.
### Cli utility
When installed globally with `npm install -g dom-compare` cli utility is available.
See usage information and command-line options with `domcompare --help`
You can try it on bundled samples:
```
$ cd samples
$ domcompare -s ./expected.xml ./actual.xml
Documents are not equal
/document/element
Attribute 'attribute': expected value '10' instead of '100'
Attribute 'attributeX' is missed
Extra element 'inner2'
/document/element/inner
Element 'node' is missed
/document
Expected CDATA value ' cdata node' instead of 'cdata node '
```
DOM Canonic Form
----------------
Implemented as [XMLSerializer](https://developer.mozilla.org/en-US/docs/XMLSerializer) interface
Simple rules
1. Every node (text, node, attribute) on a new line
2. Empty tags - in a short form
3. Node indent - 4 spaces, attribute indent - 2 spaces
4. Attributes are sorted alphabetically
5. Attribute values are serialized in double quotes
Consider the following XML-document...
```xml
DOM Compare
Text node
```
...and code snippet...
```javascript
var canonizingSerializer = new (require('dom-compare').XMLSerializer)();
var doc = ...; // parse above document somehow
console.log(canonizingSerializer.serializeToString(doc));
```
You'll receive the following output
```xml
DOM Compare
Text node
```
---
_Source: https://npm.io/package/dom-compare · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._