dom-hash

Use dom-hash to calculate a hash value from any DOM subtree. This can be useful if you need to identify an element or subtree in the DOM when you can't rely on the existence of an ID attribute. As long as the structure of the subtree and the HTML attribute values are unchanged between pageloads the hash value stays the same and can therefore be used as a weak form of identifier. You can choose to exclude some attributes and nodeTypes from the hash calculation so changes to those excluded aspects will not result in a changed hash.

usage

import { getHash } from "dom-hash";

const grid = document.getElementById("customizable-grid");
const items = [...grid.children];
items.forEach((item) => {
  const hash = getHash(item);
  const customization = localStorage.getItem(`customization_${hash}`);
  if (customization !== null) restore(item, customization);
});

exclude some aspects from hash calculation

By default no attributes or nodeTypes are excluded. You might want to exclude any DOM aspect that is changed via script code and contains changing values between pageloads; e.g. dynamically created data attributes containing timestamps, or inline styles (which can be the result of an animation with animation-fill-mode: forwards;). You might also want to exclude any DOM aspect that you consider irrelevant for the hash; e.g. HTML comments.

getHash(element, {
  exclude: {
    rootAttributes: ["data-timestamp", "style"],
    nodeTypes: Node.COMMENT_NODE,
  },
});

getHash(element, {
  exclude: { rootAttributes: "data-debug" },
});

Currently only attributes on the root element can be excluded.

state of this library

This package is in active development and currently still in a very early stage. Feedback is welcome.