とても便利で初心者でも導入しやすいJavaScriptのライブラリ、jQuery。
しかし、読み込み速度に影響が出るのと処理速度が遅いため、最近ではjQueryを使わない人も増えたのではないでしょうか。
jQueryを使えば簡単にDOM操作を行うことができますが、素のJavaScriptでも慣れればそこまで難しくありません。
要素の取得
基本的な要素の取得方法
document.getElementById('id-name'); //id名で取得
document.getElementsByClassName('class-name'); // クラス名で取得
document.getElementsByTagName('div'); // タグ名で取得
document.querySelector('#menu li'); // 最初にヒットした要素が取得される
document.querySelectorAll('li'); // ヒットした要素全部取得querySelectorとquerySlectorAllについて
document.querySelector('#menu li');querySelectorは一番最初にヒットした要素を取得します。
document.querySelectorAll('#menu li');これは#menu の子孫要素のliは全て取得します。つまり、
let elem1 = document.querySelector('#menu li');
let elem2 = document.querySelectorAll('#menu li');
console.log(elem1 === elem2[0]); // trueということになります。
これと、jQueryも同じですね。
let elem1 = document.querySelector('#menu li');
let elem2 = $('#menu li');
console.log(elem1 === elem2[0]); // truequerySelectorやquerySelectorAllを使えば、jQueryみたいな要素の取得が簡単にできます。
ただし、getElementById や getElementsByClassName に比べると処理速度は劣ります。
単純なidやclass名での取得ではquerySelectorやquerySelectorAllを使わない方が良いでしょう。
elem = document.querySelector('#menu');
elem = document.getElementById('menu'); // こっちを使おう
elem = document.querySelectorAll('.class-name');
elem = document.getElementsByClassName('class-name'); // こっちを使おう
elem1 = document.querySelector('#menu li'); // 子孫要素の取得には便利！！親子要素の取得
elem.parentNode; //親要素
elem.firstElementChild; //最初の子要素
elem.lastElementChild; //最後の子要素
elem.children; //子要素リスト兄弟要素の取得
elem.previousElementSibling; //１つ前の要素
elem.nextElementSibling; //１つ後の要素色々な要素の操作
要素の作成・追加
let div = document.createElement('div'); //要素の作成
elem.appendChild(div); //最後の子要素として追加
elem.insertBefore(div, elem.firstChild); //最初の子要素として追加
elem.parentNode.insertBefore(div, elem); //要素の直前に追加
elem.parentNode.insertBefore(div, elem.nextSibling); //要素の直後に追加要素の削除
elem.parentNode.removeChild(elem); //自分を削除
elem.removeChild(child); //特定の子要素削除
elem.textContent = null; //子要素を全て削除属性の操作
elem.getAttribute('data-item'); //属性の取得
elem.setAttribute('data-item', 'value'); //属性を設定
elem.removeAttribute('data-item'); //属性を削除たとえば、以下のように属性を操作します。
let anchor = document.createElement('a');
anchor.setAttribute('href', 'http://example.com/');
anchor.setAttribute('target', '_blank');
console.log(anchor); // =><a href="http://example.com/" target="_blank"></a> こんな感じです。
Class関連の操作
elem.classList.add('show'); //class追加
elem.classList.remove('show'); //class削除
elem.classList.toggle('show'); //classをトグル
elem.classList.contains('show') // 引数のクラスが指定されていたらtrueを返す例えば、クラスがあるか判定して、クラスを付けたり削除したりするコードを書いてみます。
jQueryでこう書きますね。
let $menu = $('#js-menu');
if($menu.hasClass('hide')) {
$menu.removeClass('hide');
} else {
$menu.addClass('hide');
}JavaScriptだけならこう書きます。
let menu = document.getElementById('js-menu');
if(menu.classList.contains('hide')) {
menu.classList.remove('hide');
} else {
menu.classList.add('hide');
}といかどちらもトグルで書けば一瞬です。
let $menu = $('#js-menu');
$menu.toggleClass('hide');let menu = document.getElementById('js-menu');
menu.classList.toggle('hide');とても良く使う操作なので覚えておきましょう。
styleの操作
JavaScriptでのスタイルの操作も簡単です。
elem.style.backgroundColor = "#fff";ただし、値には単位を入れるのを忘れないでください。
以下はjQueryと素のJavaScriptの挙動の違いです。
let $target = $('#js-target');
$target.css({
'width' : 100 // ちゃんと動く（100pxと解釈される）
});let target = document.getElementById('js-target');
target.style.width = 100; //これは動かないjQueryのCSSメソッドは単位を省略しても動きますが、JavaScriptでは省略不可です。
let target = document.getElementById('js-target');
target.style.width = '100px';まとめ
以前のJavaScriptはブラウザによって挙動が異なることが多く、様々なブラウザで同様に使えるjQueryが重宝しました。
しかし最近ではJavaScriptの標準化が進んでおり、jQueryを使うメリットが薄らいでいます。
Webサイトのパフォーマンス向上のためにも、できる限りjQueryを使わないで実装するようにしましょう。
とはいえjQueryはプラグインがたくさんあり使った方が便利な場合もあるので、ケースバイケースではありますが。
