首先需要一段HTML片段:

在开发中经常会在DOM上存储一些自定义数据，我们可以通过setAttribute方法来实现。但是当数据为引用类型时，存储后的数据却无效。

可以从上面的代码中看出，存进去的是个Object，取出来的是Object.toString()所产出的字符串。

在JS经典类库-jQuery中存在data方法是通过jQuery.cache的方式进行数据存储，那么还有没有其它方法可以实现?

由于使用场景不同，我想实现的方式是将数据直接存储到DOM节点上，以达到使用时更方便简捷的目的。

那如何存储? 变量testData存储的是通过document.querySeletor('#test-data')获取到的Element，而Element是Object的一个实例。通过[testData instanceof Object]可以进行验证。

那么一切都简易了，即然是Object类型，那么就可以随意的增删自定义属性。

通过在Element的原型上增加data方法来实现DOM扩展

这里来试一下:

现在还有一个问题, 通过Element.prototype绑定的方法只支持Element类生效,而对NodeList类并无效果.

可以通过下面这些代码进行效果测试:

这肯定不是想要的结果, 那么NodeList类就需要如下处理:

来测试下NodeList类的data实现:

这样就功能上就完成了

当然也可以将NodeList与Element进行互换, 具体情况具体考虑.

很简单不是吗?

顺带说一下，Array类型的数据，也可以增加自定义属性。