タグの中身を一部分抽出する方法はありますか

Question

いつもお世話になっております。

var value2=event.target.outerHTML　のvalue2の中身が

<li class="list" value="3">岩手県</li>　になっておりまして、

javascriptでvalueの値(この場合3)を抽出したいと考えておりまして
ネット検索しましたが、該当しそうなものが見当たらく困ってます。

ご教示お願いします。

Comments

[yambejp]

liにvalue属性をつけるのはマストなのでしょうか？
valueは特殊な属性なのでプロパティで参照ができませんが

Answer 1

liにvalue属性を指定するから問題になるのでは？
もし可能であればカスタムデータを利用ください

<script>
document.addEventListener('click', ()=>{
  if(event.target.matches('.list')){
    console.log(event.target.outerHTML);
    console.log(event.target.dataset.value);
  }
});
</script>
<ul>
<li class="list" data-value="1">北海道</li>
<li class="list" data-value="2">青森県</li>
<li class="list" data-value="3">岩手県</li>
</ul>

すみませんliは表示に関わるのでvalueを持てましたね

<script>
document.addEventListener('click', ()=>{
  if(event.target.matches('.list')){
    console.log(event.target.outerHTML);
    console.log(event.target.value);
  }
});
</script>
<ol>
<li class="list" value="10">北海道</li>
<li class="list" value="20">青森県</li>
<li class="list" value="30">岩手県</li>
</ol>

Comments

[eisaku123]

ありがとうございます。
参考にさせていただきます。

[yambejp]

すみません、liはvalueを参照できますね
追記分を確認ください

[dameo]

@yambejp様
eventがglobalに参照できるかは環境によりそうなので、お手数ですがアロー関数の引数に入れてください。

Answer 2

event.target.getAttribute("value") です。
「DOM」について勉強しましょう。

Comments

[eisaku123]

抽出できました。ありがとうございます。