概要

とりあえずDOMのタグにidとvalueを付加して、jQueryの$("#id").val()で取得しようとしたらうまくいかなかったときのメモ。

環境

macOS Catalina(10.15.2)
FireFox 72.0.2
jquery-3.4.1.min(CDN)

詳細

経緯

「『3月14日』と表示された日付のセルを選択したとき『0314』という文字列をjavascript側に渡したい」というようなことがあった。
jQueryについては**「とりあえず要素にidを指定してvalueに値を入れれば$("#id").val()で取得できる」**程度の理解だったので、

<td id="date1" value="0314">3月14日</td>

と書いて、

$("#date1").val()

で取ろうとしたら空の文字列しか取得できず「？？？」となった。

調査

簡単なテストファイルとスクリプトを作成して挙動を確認してみる。

test.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="test.js"></script>
  <table>
    <thead></thead>
    <tbody>
      <tr id="tr" value="tr">
        <th id="th" value="th">ヘッダ</th>
        <td id="td" value="td">データ</td>
      </tr>
    </tbody>
  </table>
  <div id="div" value="div">div</div>
  <span id="span" value="span">span</span><br>
  <input type="selectbox" id="selectbox" value="selectbox"><br>
  <input type="radio" id="radio" value="radio"><br>
  <button id="button" onclick="displayValue();">value</button><br>
</body>
</html>

test.js

function displayValue(){
  console.log($("#tr").val());
  console.log($("#th").val());
  console.log($("#td").val());
  console.log($("#div").val());
  console.log($("#span").val());
  console.log($("#selectbox").val());
  console.log($("#radio").val());
}

「value」ボタンをクリックして取得できる値を確認。

……selectboxとradioしか取得できていない。

原因

調べてみると、そもそもvalue属性はinput等の一部の要素でしか定義されていないようだ。
tdやらdivやらにvalueを付加してもそれはユーザ定義の属性になるので、.val()では値を取得できないらしい。

　参考：https://reference.hyper-text.org/html5/attribute/value

回避策

ユーザ定義の属性に対してその値を取得するには、.val()ではなく.attr("value")とすればよい。

(rewrite)test.js

function displayValue(){
  console.log($("#tr").attr("value"));
  console.log($("#th").attr("value"));
  console.log($("#td").attr("value"));
  console.log($("#div").attr("value"));
  console.log($("#span").attr("value"));
  console.log($("#selectbox").attr("value"));
  console.log($("#radio").attr("value"));
}

「value」ボタンをクリック。

無事に取得できた。

後日談

HTML5には「独自データ属性」というものがあり、どうやらこれを使うのが正攻法のようだ。

<td id="date1" data-value="0314">3月14日</td>

値の取得には.data()を使えばOK。

$("#date1").data("value")

　参考：https://wp.tech-style.info/archives/102
　　　　https://qiita.com/katsukii/items/c29b61b35d4919493e06

まとめ

.val()で取得できるvalue属性はinput等の一部の要素にしかない
tdやdiv等の要素にvalue属性を与えた場合は.attr("value")で取得できる
ちゃんとやるなら独自データ属性と.data()を使おう