WePuri
ワードプレス教室

WePuri
ワードプレス教室

MENU
[bogo]

classを指定する方法

このカリキュラムでは、JavaScriptでHTMLのclassを指定するための方法をご紹介させていただきます。

使用するオブジェクト

documenthtmlを指定する
getElementsByClassName()classを指定
querySelector指定したタグの1番目の情報を取得する
querySelectorAll()指定したタグ、id、classなどをすべて配列に入れてくれる

使い方例

getElementsByClassName()の場合

入力

<div class="box"></div>
<script>
  const $box = document.getElementsByClassName('box')[0];
  console.log($box);
</script>

コンソールの結果

<div class="box"></div>

querySelectorAll()の場合

入力

<div class="box"></div>
<script>
  const $box = querySelectorAll('box')[0];
  console.log($box);
</script>

コンソールの結果

<div class="box"></div>