2017.10.24

jQueryのattr()やprop()を生JavaScriptで実装する脱jQuery

attr() は属性値の取得・設定、prop() は主にチェックボックスやセレクトボックスの状態を取得・設定する際に使います。この2つの関数をjQueryなしで実装してみます。

`attr()`


var attr = function(node, name, value) {
  if (typeof value === 'undefined') {
    return node.getAttribute(name);
  }
  node.setAttribute(name, value);
};

使い方


<div class="box" data-size="big"></div>


// 取得
var value = attr(document.querySelector('.box'), 'data-size');
// => big

// 設定
attr(document.querySelector('.box'), 'data-size', 'small');
// => <div class="box" data-size="small"></div>

`prop()`


var prop = function(node, name, value) {
  if (typeof value === 'undefined') {
    return node[name];
  }
  node[name] = value;
};

使い方


<input class="input" type="radio" checked>

<select class="language">
  <option value="en">英語</option>
  <option value="ja" selected>日本語</option>
  <option value="de">ドイツ語</option>
  <option value="fr">フランス語</option>
</select>


// 取得
var value = prop(document.querySelector('.input'), 'checked');
// => true
var value = prop(document.querySelector('.language > option[value="en"]'), 'selected');
// => false

// 設定
prop(document.querySelector('.input'), 'checked', false);
// => チェック解除
prop(document.querySelector('.language > option[value="fr"]'), 'selected', true);
// => フランス語が選択される