data-属性タグ内にあるHTMLテキストを取得したい

Question

やりたいこと
クラスやidを使用せずにデータ属性のあるDOM要素（★★★★★★部分）をvanilla JSで取得及び設定したい。現状要素の取得から何からすでにできない

「data 属性 dom要素を取得」などで検索しましたが全く情報がなく、jqueryならできるみたいなのですが
現在vanilla JS縛りでコーディングしていますので何かご存知の方教えて下さい。

<table>
　　<tr id="pageprice">
　　　　<td> 下層 </td>
　　　　<td data-page="13" data-price="8000"> ★★★★★★ </td>
　　</tr>
</table>

  const pageprice = document.querySelector("#pageprice");
  const money = pageprice.children('td').dataset.page * pageprice.children('td').dataset.price;
  const text = pageprice.dataset.page.text(money);
  console.log("text :>> ", text);

Comments

[kei344]

例示しているコードはconsoleにどの値を出すコードでしょうか。

[Overrun]

.text(money)部分でHTML出力を試みているコードです

Answer 1

テキストを設定したいだけであれば特にdata属性は関係ありません。

const d = document.querySelector("[data-price]");
d.textContent = d.dataset.page * d.dataset.price;
```**動くサンプル：**[https://jsfiddle.net/zmgutjnx/](https://jsfiddle.net/zmgutjnx/)

---

【Node.textContent - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Node/textContent](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent)

Comments

[Overrun]

なるほど！取得できました！