恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

jQueryを使わずにJavaScriptだけでDOM操作

投稿日:2018-03-13 更新日:

javascript

とても便利で初心者でも導入しやすい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]); // true

querySelectorや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; //1つ前の要素
elem.nextElementSibling; //1つ後の要素

色々な要素の操作

要素の作成・追加

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はプラグインがたくさんあり使った方が便利な場合もあるので、ケースバイケースではありますが。

Related Entries

この記事を書いた人

TAC

TAC

Webデザイナー、フロントエンドエンジニア。 Webデザイン、HTML/CSS、JavaScript、PHP、SEOが専門です。