現在表示されているページURLのディレクトリ名を取得して、bodyにクラス名として付与する

Question

前提・実現したいこと

JavaScript初心者です。
ブログシステムをカスタマイズしています。
動的に生成されるカテゴリーページのURLのパスの一部を取得して、
それをbodyにクラス名として付与したいです。

望み通りの文字列は取得できているようなのですが、
どうしてもクラス名として出てきません。

発生している問題・エラーメッセージ

bodyタグに何も追加されない。

コンソールエラーメッセージ

TypeError: undefined is not an object (evaluating '$('body').classList.add')

該当のソースコード

$(function() {
　var $dir = location.href.split("/");
　var $dir2 = $dir[$dir.length -1];
　$('body').classList.add(dir2);
});

試したこと

alert($dir2);
をすると取得したい文字列は表示されます。

bodyにクラス名を追加する方法として、addClassなど色々と試したのですが何も起こりません。
何か根本的に間違えているのかもしれません。どうかよろしくお願いします。

Answer 1

Javascriptでクラス名を付与したらそのままブラウザ上でソースコードに現れると思っていたのですが、そうではなかったようです。
Safariのインスペクタで確認していて、何をしてもクラス名が追加されないと悩んでいましたが、Chromeの方でみたらリアルタイムで追加されていました。

コードの間違いと、確認方法自体もよくなかったようです。
勉強になりました、ありがとうございました。

Answer 2

jQuery なら jQuery を使いましょう。

$( 'body' ).addClass( $dir2 );

【.addClass() | jQuery API Documentation】
https://api.jquery.com/addclass/

Comments

[mikishiro]

ありがとうございます。
いただいたアドバイスと、もう1つ間違いに気づいたことで解決できましたありがとうございました！

Answer 3

$('body').classList.add(dir2);

以下の誤りでは？

$('body').classList.add($dir2);

Comments

[mikishiro]

ありがとうございます、$をつけた場合も試したのですが同じでした。
よく見るとコンソールエラーが出ていましたので、質問のエラーに追加しました。