HTML5サンプルコードのdata-*属性を自動取得する方法を詳しく解説

プロジェクトでは一連のカスタム タグを設計する必要があるため、タグ属性にアクセスする方法が含まれます。 HTML5 の data-* 属性を使用する場合、要素を取得した後、dataset.attribute 名に直接アクセスできます。データセットのタイプは DOMStringMap {} であり、これは依然としてキー/値オブジェクトです。使いやすい。ただし、互換性の問題が発生し、Android 2.3 などの一部の古いブラウザではサポートされていません。

これに対する互換性パッチを作成できます。主な原則は、document.querySelector/querySelectorAll などのメソッドを「ハイジャック」して要素を取得し、カスタム フィールド dataset = {....} を提供して同様の標準的な記述を実現することです。もちろん、単に getDataAttrib() のような API メソッドを提供して属性を取得することもでき、効果は同じです。この方法ではなく別の方法を採用する理由は、より標準に近づき、全員に一貫したアクセス方法を使用するためです。

私の実装は次のとおりです:

// 如浏览器不支持 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(&#39;data-&#39;) != -1){
	            hash[attribute.nodeName.slice(5)] = attribute.nodeValue;
            }
        }
        
        return hash;
    }
})();

要素を取得するには querySelector メソッドで十分であることを考慮すると、現時点では documenty.getElementByID("#id") メソッドは提供されていません。

注意: ドキュメント以外のオブジェクトに対して実行される querySelector /querySelectorAll はサポートされず、データセットは返されません。 この問題は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(&#39;#foo&#39;);
alert(el.querySelector(&#39;p&#39;).dataset.id);
</script>

問題の概要:

1. ブラウザは querySelector/querySelectorAll メソッドをサポートできる必要があります。それ以外の場合、このメソッドは無意味です。要素データセットを取得するメソッドから提供されます。たとえば、イベント ハンドラーのパラメーター e の e.tartget.dataset は空のオブジェクトです。

2. 上記のコードに示されているように、単一の querySelector() が querySelectorAll() を介して渡されます。これには、配列を走査する操作が含まれています。これを適切に最適化し、ネイティブのものを使用できますか?

3. CSS セレクター エンジンの速度に敏感な学生には、この方法は適用できません。システムのメソッドが変更されるため、必然的にパフォーマンスが低下することがわかります。ただし、この減少は小さいことは保証できます。

4. はまだ documeny.getElementByID をサポートしていないため、追加される予定です。

以上がHTML5サンプルコードのdata-*属性を自動取得する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。