如何自动获取HTML5的data-*属性示例代码详解-木庄网络博客

本文摘自PHP中文网，作者黄舟，侵删。

项目中需要设计一系列的自定义标签，于是涉及到标签的属性如何访问。使用 HTML5 的 data-* 属性的话，获取元素后直接访问 dataset.属性名称即可，dataset 的类型为 DOMStringMap {}，一个 MAP 对象，仍是 key / value 式的对象，使用上比较方便。但却遇到一个兼容性的问题，在 Android 2.3 等的一些旧有浏览器上尚不支持。

对此，我们可以写一个兼容性的补丁。主要原理是在“劫持” document.querySelector/querySelectorAll 这类获取元素的方法之后，通过提供自定义的字段 dataset = {....} 即可实现类似标准写法。当然，简单地，你可以通过一个 API 方法来提供类似 getDataAttrib() 获取属性，效果一样。我们之所以不采取这种方式，而采用另外一种方式，是为了更好向标准靠拢，使用大家都一致的访问方式。

我的实现如下：

// 如浏览器不支持 HTML5 data-* 属性，设置一个。
;(function(){
    // 测试元素
    var el;
    el = document.createElement('p');
    el.setAttribute('data-id', '111');
    if(!el.dataset){
        Element.prototype.dataset = {};
         
        var querySelectorAll = document.querySelectorAll; // 保存一个
        document.querySelectorAll = function(){
            var resultEls = querySelectorAll.apply(this, arguments);
            for(var resultEl, i = 0, j = resultEls.length; i < j; i++){
                resultEl = resultEls[i];
                resultEl.dataset = getAttrib(resultEl.attributes)
            }
             
            return resultEls;
        }
         
        // 也就是单个的 document.querySelectorAll()。不保存，直接覆盖
        document.querySelector = function(){
            var resultEls = document.querySelectorAll.apply(this, arguments);
            return resultEls ? resultEls[0] : null;
        };  
         
    }
    el = null; // 要完全移除 dummy 元素，是否这样就 ok？
     
    /**
     * 把元素保存为 JSON 对象
     * @param {Element.attributes} 元素属性集合
     * @return {Object}
     */
    function getAttrib(attributes) {
        if (!attributes) return;
        var hash = {};
         
        for (var attribute, i = 0, j = attributes.length; i < j; i++) {
            attribute = attributes[i];
            if(attribute.nodeName.indexOf('data-') != -1){
                hash[attribute.nodeName.slice(5)] = attribute.nodeValue;
            }
        }
         
        return hash;
    }
})();