前回記事「jQueryでよく使うメソッドをネイティブのJavaScriptに置き換えてみる＃1：基本的な操作」に引き続き、jQueryでよく使うメソッドをネイティブのJavaScriptに置き換えていきたいと思います。第2回目の今回は要素が持つ値の取得や変更、設定などを行うメソッドを中心にまとめていきます。これらの処理もjQueryを使うことで簡単に実装することができるのではないでしょうか。実際のネイティブのJavaScriptで記述する場合を見ていきます。  

要素の属性を取得・設定・削除：attr() / removeAttr()

HTMLの要素には様々な属性が存在し、それらの属性はJavaScriptで制御することができます。そんな時に使うのが「attr()」や「removeAttr()」メソッドです。引数には対象となる属性名とその属性名に設定される値を指定します。attr()メソッドでは、値を入れない場合には単純に取得するだけになります。 【jQuery】

// 属性値を取得
$("#image").attr('src');

// 属性値を設定
$("#image").attr('src', './img/example.jpg');

// 属性値を削除
$("#image").removeAttr('src');

  ネイティブのJavaScriptでは、その名の通り「getAttribute()」や「removeAttribute()」というメソッドを使います。こちらもjQueryと使い方はよく似ているのでわかりやすいですね。引数に入れる値も同じような感じです。 【JavaScript】

// 属性値を取得
const element = document.getElementById('image');
element.getAttribute('src');

// 属性値を設定
const element = document.getElementById('image');
element.setAttribute('src', './img/example.jpg');

// 属性値を削除
const element = document.getElementById('image');
element.removeAttribute('src');

   

フォーム要素の値を取得・設定：val()

バリデーションなどフォーム周りの機能をフロントエンド側で実装する場合には必須となる要件ですね。jQueryでは「val()」メソッドで簡単に値を取得することができます。引数を入れるとその値を設定することもできます。 【jQuery】

// フォームの値を取得
$("#input").val();

// フォームに値を設定
$("#input").val('form-value');

  ネイティブのJavaScriptでは、jQueryでのメソッドを使う方法ではなく、Elementオブジェクトの「value」プロパティにアクセスすることで取得できます。設定する場合にはプロパティに値となるものを代入する形になります。innerHTMLやcontentTextと同じ方法ですね。 【JavaScript】

// フォームの値を取得
const element = document.getElementById('input');
element.value;

// フォームに値を設定
const element = document.getElementById('input');
element.value = 'form-value';

   

フォーム要素のプロパティ操作：prop()

チェックボックスやラジオボタンのチェックや、ボタン要素の非活性など、フォーム要素が持つプロパティの情報や変更を与える場合に使うのが「prop()」メソッドです。HTMLの属性になりますが、操作する場合にはこちらのメソッドを使わないと正しく動作しない場合があります。引数には対象となる属性名とその値に入れるデータを指定します。 【jQuery】

// フォームのプロパティを取得
$("#checkbox").prop('checked');

// フォームのプロパティを設定
$("#checkbox").prop('checked', false);

  ネイティブのJavaScriptでは少し異なり先ほどと同じくElementオブジェクトのプロパティにアクセスする形になります。プロパティ名は適宜合わせる必要がありますが「checked」であればchecked属性を扱うことができますし、「disabled」であればdisabled属性というようになります。こちらも設定する値を代入することができます。 【JavaScript】

// フォームのプロパティを取得
const element = document.getElementById('checkbox');
element.checked;

// フォームのプロパティを設定
const element = document.getElementById('checkbox');
element.checked = false;

   

ページトップからの垂直方向へのスクロール量の取得・設定：scrollTop()

スクロールに合わせた機能やスクロール関連の動きなどを与える場合によく使うのが「scrollTop()」メソッドです。トップからのスクロール量を取得できます。また引数に数値を設定すると、スクロール位置を移動させることができます。基本的にwindowオブジェクトに対して使います。 【jQuery】

// スクロール量の取得
$(window).scrollTop();

// スクロール量の設定
$(window).scrollTop(200);

  ネイティブのJavaScriptでは、windowオブジェクトの「scrollY」プロパティにアクセスすることで値を取得できます。こちらは垂直方向のスクロール量になるので、水平方向の場合には「scrollX」プロパティとなります。また、このプロパティは読み取り専用となるので、スクロール位置を移動させる場合には専用のプロパティではなく「scrollTo()」メソッドを利用します。第一引数には水平方向の、第二引数には垂直方向のスクロール量を数値で指定します。 【JavaScript】

// スクロール量の取得
window.scrollY;

// スクロール量の設定
window.scrollTo(0, 200);

   

要素の幅・高さ（content + padding）の取得：innerWidth() / innerHeight()

こちらもレイアウト系の処理でよく使う要素の幅や高さを取得する方法です。jQueryでは主に「innerWidth()」や「innerHeight()」メソッドを使うことが多いのではないでしょうか。こちらはコンテンツ本体とパディングの値を含めたものになります。 【jQuery】

// 幅の取得
$("#hoge").innerWidth();

// 高さの取得
$("#hoge").innerHeight();

  ネイティブのJavaScriptを使う場合には、Elementオブジェクトの「clientWidth」あるいは「clientHeight」プロパティにアクセスすることで値を取得できます。これらのプロパティは読み取り専用なので、ここから幅や高さを変更することはできませんので注意が必要です。 【JavaScript】

// 幅の取得
const element = document.getElementById('hoge');
element.clientWidth;

// 高さの取得
const element = document.getElementById('hoge');
element.clientHeight;

   

要素の座標を取得：offset()

スクロールに連動した動きや機能を実装するときによく見かける「offset()」メソッドでは、要素が表示されている位置の左上を基準とした座標を取得できます。座標の値についてはページ上端および左端を基準にした値です。返り値として、左端からの座標と上端からの座標がセットになったオブジェクトが返ってくるので、それぞれのキーである「left」と「top」にアクセスして取得できます。 【jQuery】

// 水平方向の座標
$("#hoge").offset().left;

// 垂直方向の座標
$("#hoge").offset().top;

  ネイティブのJavaScriptでは「getBoundingClientRect()」メソッドで同じように水平方向の座標と垂直方向の座標が取得できます。ただしこちらの場合、ビューポートの左上が基準となるのでスクロールで値が変わってしまいます。そこで、トップからのスクロール量を足すことで、ページ上端もしくは左端を基準とした座標を取得することができます。 【JavaScript】

// 水平方向の座標
const element = document.getElementById('hoge');
element.getBoundingClientRect().left + window.scrollX;

// 垂直方向の座標
const element = document.getElementById('hoge');
element.getBoundingClientRect().top + window.scrollY;

   

スタイルの設定：css()

JavaScript側で動的にスタイルを変えたい場合には、CSSをJavaScriptで設定することも多々あります。jQueryでは「css()」メソッドを使うことで、CSSに近い記法でスタイルを設定できますので、とてもわかりやすいですね。もちろん複数のプロパティに対応しています。 【jQuery】

$("#hoge").css({
  'padding': '10px',
  'color': 'red'
});

  ネイティブのJavaScriptでは、Elementオブジェクトの「style」プロパティにアクセスし、スタイルを代入する形になるのですが、複数に対応させる必要があるので「cssText」プロパティ経由で値を指定してあげる必要があります。このときCSSに設定する値は文字列である必要があります。 【JavaScript】

const element = document.getElementById('hoge');
element.style.cssText = 'padding: 10px; color: red;'

 

---

  前回に引き続き今回もjQueryのメソッドをネイティブのJavaScriptで再現してみました。普段よく使うjQueryのメソッドもこのようにしてまとめてみると、改めてどのような処理を担っているのかがわかりやすいですね。前回のメソッドと合わせて今回まとめているメソッドもよく使われているのではないでしょうか。jQueryから他のフレームワークへの移転を行う場合には参考にどうぞ。   （こちらの記事も合わせてどうぞ） jQueryでよく使うメソッドをネイティブのJavaScriptに置き換えてみる＃1：基本的な操作