81 lines
2 KiB
Markdown
81 lines
2 KiB
Markdown
dom-serialize
|
|
=============
|
|
### Serializes any DOM node into a String
|
|
|
|
[](https://saucelabs.com/u/dom-serialize)
|
|
|
|
[](https://travis-ci.org/webmodules/dom-serialize)
|
|
|
|
It's like `outerHTML`, but it works with:
|
|
|
|
* DOM elements
|
|
* Text nodes
|
|
* Attributes
|
|
* Comment nodes
|
|
* Documents
|
|
* DocumentFragments
|
|
* Doctypes
|
|
* NodeLists / Arrays
|
|
|
|
For custom serialization logic, a "serialize" event is dispatched on
|
|
every `Node` which event listeners can override the default behavior on by
|
|
setting the `event.detail.serialize` property to a String or other Node.
|
|
|
|
The "serialize" event bubbles, so it could be a good idea to utilize
|
|
event delegation on a known root node that will be serialized.
|
|
Check the `event.serializeTarget` property to check which `Node` is
|
|
currently being serialized.
|
|
|
|
|
|
Installation
|
|
------------
|
|
|
|
``` bash
|
|
$ npm install dom-serialize
|
|
```
|
|
|
|
|
|
Example
|
|
-------
|
|
|
|
``` js
|
|
var serialize = require('dom-serialize');
|
|
var node;
|
|
|
|
// works with Text nodes
|
|
node = document.createTextNode('foo & <bar>');
|
|
console.log(serialize(node));
|
|
|
|
|
|
// works with DOM elements
|
|
node = document.createElement('body');
|
|
node.appendChild(document.createElement('strong'));
|
|
node.firstChild.appendChild(document.createTextNode('hello'));
|
|
console.log(serialize(node));
|
|
|
|
|
|
// custom "serialize" event
|
|
node.firstChild.addEventListener('serialize', function (event) {
|
|
event.detail.serialize = 'pwn';
|
|
}, false);
|
|
console.log(serialize(node));
|
|
|
|
|
|
// you can also just pass a function in for a one-time serializer
|
|
console.log(serialize(node, function (event) {
|
|
if (event.serializeTarget === node.firstChild) {
|
|
// for the first child, output an ellipsis to summarize "content"
|
|
event.detail.serialze = '…';
|
|
} else if (event.serializeTarget !== node) {
|
|
// any other child
|
|
event.preventDefault();
|
|
}
|
|
}));
|
|
```
|
|
|
|
```
|
|
foo & <bar>
|
|
<body><strong>hello</strong></body>
|
|
<body>pwn</body>
|
|
<body>…</body>
|
|
```
|