このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

最近、外はめっきり肌寒くなり、もう冬の気配さえも感じ始める今日この頃になってきましたね。

皆さんはどの様にclassを取得していますか？

え？取得しない？

そんな取得しない方々にも簡単に取得出来る世の中になりました。

今回はgetElementByClassNameとquerySelectorです。

var element = document.getElementById("hoge");
element.getAttribute("class");

とか、

var element = document.getElementById('hoge');
element.className = "hogege";

とかで取得や変更を行ってきましたが、HTML5の仕様により、

getElementByIdの様に getElementsByClassNameで取得出来ます。

もちろん古いブラウザは対応しておりません。

便利になりましたねー。

getElementsByClassName

例：

var elements = document.getElementsByClassName('hoge');

更に便利なのがquerySelectorとなります。

querySelector

querySelectorはCSSのセレクタを使うように使用することが可能となっています。

jQueryの$(‘.hoge’);と同様の使用方法です。

例：

var elements = document.querySelectorAll('hoge');

例：

var elements = document.querySelectorAll ('.hoge > li');

このquerySelectorAllはgetElementsByClassNameで取得するよりパフォーマンスが良いそうです。

また、クラスが一つしか存在しない場合はquerySelectorで取得するほうがよいでしょう。

例：

var elements = document.querySelector('.hoge');

querySelectorAllで取得したオブジェクトは配列で格納されますので、

elements[0].classList.add(‘hogege’);

などで指定を行います。