マテリアルコンポーネントWeb - mdc attachToは最初の要素にのみ適用されます

Question

私はMaterial Components Webを使用してウェブサイトを作成しています。私はクラス.mdc-buttonとボタンのリストを持って、私は私のJavascriptファイルに次の行でそれをアクティブにしました。

window.button = new mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button')); 

問題は、これが唯一の.mdc-button は、なぜそれが、どのようにそれを修正するためにされたクラスで最初の要素に適用されるということですか？

Answer 1

document.querySelectorは、常にDOM内にある要素の最初のインスタンスを返します。 document.getElementsByClassName('mdc-button')を使用すると、DOM内のクラスの完全なリストを返すことができます。 ``と、

https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

おそらく、この

var x = document.getElementsByClassName('mdc-button'); 
var i; 
for (i = 0; i < x.length; i++) { 
    mdc.ripple.MDCRipple.attachTo(x[i]); 
}