| 1 | dom-serialize
|
|---|
| 2 | =============
|
|---|
| 3 | ### Serializes any DOM node into a String
|
|---|
| 4 |
|
|---|
| 5 | [](https://saucelabs.com/u/dom-serialize)
|
|---|
| 6 |
|
|---|
| 7 | [](https://travis-ci.org/webmodules/dom-serialize)
|
|---|
| 8 |
|
|---|
| 9 | It's like `outerHTML`, but it works with:
|
|---|
| 10 |
|
|---|
| 11 | * DOM elements
|
|---|
| 12 | * Text nodes
|
|---|
| 13 | * Attributes
|
|---|
| 14 | * Comment nodes
|
|---|
| 15 | * Documents
|
|---|
| 16 | * DocumentFragments
|
|---|
| 17 | * Doctypes
|
|---|
| 18 | * NodeLists / Arrays
|
|---|
| 19 |
|
|---|
| 20 | For custom serialization logic, a "serialize" event is dispatched on
|
|---|
| 21 | every `Node` which event listeners can override the default behavior on by
|
|---|
| 22 | setting the `event.detail.serialize` property to a String or other Node.
|
|---|
| 23 |
|
|---|
| 24 | The "serialize" event bubbles, so it could be a good idea to utilize
|
|---|
| 25 | event delegation on a known root node that will be serialized.
|
|---|
| 26 | Check the `event.serializeTarget` property to check which `Node` is
|
|---|
| 27 | currently being serialized.
|
|---|
| 28 |
|
|---|
| 29 |
|
|---|
| 30 | Installation
|
|---|
| 31 | ------------
|
|---|
| 32 |
|
|---|
| 33 | ``` bash
|
|---|
| 34 | $ npm install dom-serialize
|
|---|
| 35 | ```
|
|---|
| 36 |
|
|---|
| 37 |
|
|---|
| 38 | Example
|
|---|
| 39 | -------
|
|---|
| 40 |
|
|---|
| 41 | ``` js
|
|---|
| 42 | var serialize = require('dom-serialize');
|
|---|
| 43 | var node;
|
|---|
| 44 |
|
|---|
| 45 | // works with Text nodes
|
|---|
| 46 | node = document.createTextNode('foo & <bar>');
|
|---|
| 47 | console.log(serialize(node));
|
|---|
| 48 |
|
|---|
| 49 |
|
|---|
| 50 | // works with DOM elements
|
|---|
| 51 | node = document.createElement('body');
|
|---|
| 52 | node.appendChild(document.createElement('strong'));
|
|---|
| 53 | node.firstChild.appendChild(document.createTextNode('hello'));
|
|---|
| 54 | console.log(serialize(node));
|
|---|
| 55 |
|
|---|
| 56 |
|
|---|
| 57 | // custom "serialize" event
|
|---|
| 58 | node.firstChild.addEventListener('serialize', function (event) {
|
|---|
| 59 | event.detail.serialize = 'pwn';
|
|---|
| 60 | }, false);
|
|---|
| 61 | console.log(serialize(node));
|
|---|
| 62 |
|
|---|
| 63 |
|
|---|
| 64 | // you can also just pass a function in for a one-time serializer
|
|---|
| 65 | console.log(serialize(node, function (event) {
|
|---|
| 66 | if (event.serializeTarget === node.firstChild) {
|
|---|
| 67 | // for the first child, output an ellipsis to summarize "content"
|
|---|
| 68 | event.detail.serialze = '…';
|
|---|
| 69 | } else if (event.serializeTarget !== node) {
|
|---|
| 70 | // any other child
|
|---|
| 71 | event.preventDefault();
|
|---|
| 72 | }
|
|---|
| 73 | }));
|
|---|
| 74 | ```
|
|---|
| 75 |
|
|---|
| 76 | ```
|
|---|
| 77 | foo & <bar>
|
|---|
| 78 | <body><strong>hello</strong></body>
|
|---|
| 79 | <body>pwn</body>
|
|---|
| 80 | <body>…</body>
|
|---|
| 81 | ```
|
|---|
