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

当前第2页返回上一页

请注意：对于非 document 对象身上执行的 querySelector /querySelectorAll 将不支持，仍不会返回 dataset。 针对该问题，已于2013.1.16 通过重写 Element.prototype 方法解决。详细过程如下：

if(!canSupportDataSet()){
    Element.prototype.dataset = {};
 
 
    modifyQuerySelectorAll_By(document);  // document 的好像不一样……
    modifyQuerySelectorAll_By(Element.prototype);
}
 
 
/**
 * 覆盖系统的 querySelector/querySelectorAll 方法。
 * @param host {Element.prototype/Document}
 */
function modifyQuerySelectorAll_By(host){
    var querySelectorAll = host.querySelectorAll; // 保存一个
    host.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()。不保存，直接覆盖
    host.querySelector = function(){
        var resultEls = host.querySelectorAll.apply(this, arguments);
        return resultEls ? resultEls[0] : null;
    };
}

测试例子：

<listview id="foo" data-id="1">
    Hello World
    <p data-id="2"></p>
</listview>
 
<script>
var el = document.querySelector('#foo');
alert(el.querySelector('p').dataset.id);
</script>