jQuery以外のバージョンのデータ（）を実装するにはどうすればよいですか？

Question

私は再コード私が作成したプラグインjQueryので、私は

Javascript純粋なほとんどの機能で作成するために、私は YouMightNotNeedjQuery参照を休閑作ることができますが、私が使用するため jQuery.data機能を実装するための任意のアイデアを持っていない取りたいです私のプラグインで。

Javascriptでこの機能を実装する方法は？

Answer 1

あなたは

<article 
    id="electriccars" 
    data-columns="3" 
    data-index-number="12314" 
    data-parent="cars"> 
... 
</article> 

Javascriptをdatasets

HTML経由でそれを行うことができます

var article = document.getElementById('electriccars'); 

article.dataset.columns // "3" 
article.dataset.indexNumber // "12314" 
article.dataset.parent // "cars" 

参考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

編集コメントどおり

HTML

<article id="electriccars"> 
    ... 
</article> 

Javascriptを

var article = document.getElementById('electriccars'); 
article.setAttribute('data-columns', '3'); 

例：あなたはgetAttribute()を使用している場合

値は、したがって、それは.dataとしてjQueryの.dataのような使用のためのようではありません、文字列として扱われますオブジェクトと配列をデータattrに割り当てます。

datasetを使用すると、jQueryと同じような使い方が得られます。

フィドルhttps://jsfiddle.net/69ukrpcf/

var myArr = ['item1', 'items2']; 

jQueryのバージョン

$('#one').data('foo', myArr); 
var one = $('#one').data('foo'); 
console.log(one); 

NON jQueryのバージョン

var div = document.getElementById('two'); 
var two = div.dataset.foo = myArr; 
console.log(two); 

Answer 2

how to work with data attributes hereについては、この記事をお読みください。

JavaScriptを使用してデータ属性を取得するための多くの方法があります。

var domElement = document.getElementById('randomid'); 
var articleId = domElement.getAttribute('data-articleid'); 
console.log(articleId);//Outputs 123 

あなたはしかしelement.datasetが古いIEで失敗する、あまりにもDOM要素のデータセットのプロパティを使用することができます。