Skip to content
Serializes any DOM node into a String
JavaScript Makefile
Branch: master
Clone or download
Latest commit 205ac26 May 4, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test add support for passing encode() options in to serializeAttribute() a… Feb 13, 2015
.gitignore initial commit Jan 7, 2015
.travis.yml add .travis.yml file Jan 16, 2015
History.md Release 2.2.1 Nov 5, 2015
LICENSE Added License May 3, 2017
Makefile add Makefile for zuul tests Jan 16, 2015
README.md README: update for `serializeTarget` Feb 4, 2015
index.js bump extend and void-elements Nov 5, 2015
package.json Release 2.2.1 Nov 5, 2015

README.md

dom-serialize

Serializes any DOM node into a String

Sauce Test Status

Build Status

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

$ npm install dom-serialize

Example

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 &amp; &lt;bar&gt;
<body><strong>hello</strong></body>
<body>pwn</body>
<body>…</body>
You can’t perform that action at this time.