document.getElementsByClassName で要素の幅を取得

document.getElementsByClassName で要素の幅を取得するとき、

script.js

const Box = document.getElementsByClassName("box");
const W   = Box.clientWidth;

とすると undefined となり値が取れないので、以下の方法で値を取得

idで取得する場合

script.js

const Box = document.getElementById("box");
const W   = Box.clientWidth;

classで取得する場合

script.js

const Box = document.getElementsByClassName("box");
const W   = Box[0].clientWidth;

HTMLCollection

HTMLCollection は要素群(document 内の順序)の一般的な集合(配列)を表現したインターフェイスで，リストから選択するためのメソッドとプロパティを提供します．
※配列ではないので注意

おわりに

jQurey大好きな僕としては、一つコードを書くたびに「jQueryなら簡単なのに」と度々脳裏をよぎりますが、
そんな事を言っている時代でもない¹ みたいなので、ひとつずづ頑張って覚えていこうと思います。
他にも良い方法があれば、是非コメントをください。

参考

HTMLCollection - Web API インターフェイス | MDN

1. You Don't Need jQuery ↩