JavaScriptでのaタグvalue値の取得

Question

やりたいこと

知見のご教示をいただけたらうれしいです。
よろしくお願いします。

JavaScriptでのaタグvalue値の取得をしたいと思っています。

aタグのvalue値は、隣接するチェックボックスの状態によって、0 or 1が切り替わる仕様です。
(1)デフォルトではチェックボックスにチェックが入っていないので「0」が入った状態
(2)チェックを入れると「1」、再度チェックを外すと「0」がvalueに入ります

発生している問題

説明

(2)のチェックを入れたり外したりした後の状況で取得は可能なのですが、(1)のデフォルト状態で何故が取得できません。

コード

<a class="target" value="0" onclick="close();">閉じる</a>

※上記のclose()は今回と関係ありません

下記のscriptで取得を試みています（コンソールで試しています）

var targetClass = document.getElementsByClassName('target');
console.log(targetClass[0].value);

エラーコード

undefined

環境情報

・Google Chrome 63.0.3239.132

Answer 1

aタグにはvalue属性はないですからね
ユーザーが任意に拡張するときはdata-*形式を利用してください

<a class="target" data-value="0">閉じる</a>
<script>
var targetClass = document.getElementsByClassName('target');
console.log(targetClass[0].getAttribute("data-value"));
</script>

追記

念のため、data-*形式であれば、最近のブラウザはdatasetでアクセスできます

<a class="target" data-value="0">閉じる</a>
<script>
  console.log(document.querySelector('.target').dataset["value"]);
</script>

Comments

[illumi]

ご回答ありがとうございます。
仰るとおり、本来はdata-*属性で拡張すべきですね。。

今回はHTML側の修正が難しい状況だったため、別回答をベストアンサーとさせていただきましたが、とても参考になりました。ありがとうございました。

[yambejp]

念のためdata-*のアクセスの利点について追記しておきました

Answer 2

a要素に対応するHTMLAnchorElementオブジェクトに非標準な属性valueを直接操作するためのプロパティは定義されていません.

Element標準のgetAttribute("value")/setAttribute("value", val)を使います.

Comments

[illumi]

ご回答ありがとうございます！こちらで解決しました！
実際にこちらの方法を採用させていただきましたため、ベストアンサーとさせていただきました！

Answer 3

a要素にvalue属性はありません。

a 要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a

Comments

[illumi]

ご回答ありがとうございます。
確かにおっしゃる通りですね。。今後このような例は自分の中で留意したいとおもいます。