JavaScript基本【DOM操作基礎】

DOMとは、JavaScript等でHTMLの操作を行うこと。

Document Object Modelの略で、ドキュメントをオブジェクトのように扱います。

値を変更したり、色を変えてみたりといった操作が可能になりますので、HTMLの表現の幅が一気に広がります。

私はDOM操作に対しての理解が浅いので、いろいろ試してみようかと思います！

See the Pen QWWmQem by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

上記は、id="test"の中の文字列をtitle!からHello! JSに変更、

更にボタンをクリックするとThank you!に変わり、スタイル属性(文字色、サイズ)も変更しています。

HTML内ボタンのonClickでJavaScript内のメソッドを渡すことでボタンClickをトリガーにして操作を行っています。

See the Pen oNNqqGY by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

先ほどはgetElementByIdを使用しましたが、更に便利で簡単に要素を取得することができます。

それがquerySelectorとquerySelectorAllです。

querySelectorは見つけた要素の先頭１つ、querySelectorAllは、該当する要素をリストで返却してくれます。

例では、querySelectorで変更した文字色は先頭１つの要素のみ、

querySelectorAllで取得したものはforEachですべてのID要素に背景色が反映されているのがわかると思います。

更に、forEachは第二パラメータにインデックスを指定することができるので、以下の例のようにリスト要素の偶数行のみに適用させる、ということも可能になります。

See the Pen jOOzzQR by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

SuzuBlog