如何在JS中從HTML中獲取數據輸出？

Question

如何從以下代碼中獲取“123”值？ 我認為該片段應該有效，但我收到了電子郵件：....

<div id="home">
    <div class="name" my-data="123">Email: test@gmail.com</div> 
</div>

---

var element = document.querySelector('.element');
var dataAttribute = element.getAttribute('my-data');

console.log(dataAttribute);

Answer 1

您嘗試將querySelector與.element一起使用，該類不存在，而您需要使用.name

 var element = document.querySelector('.name'); var dataAttribute = element.getAttribute('my-data'); console.log(dataAttribute);

 <div id="home"> <div class="name" my-data="123">Email: test@gmail.com</div> </div>

---

僅就您的知識而言，您可以像這樣使用data-attribute ：

 var element = document.querySelector('.name'); var dataAttribute = element.getAttribute('data-email'); console.log(dataAttribute);

 <div id="home"> <div class="name" data-email="123">Email: test@gmail.com</div> </div>

參考：

• 使用數據屬性
• 查詢選擇器

---

對於 div 電子郵件的選擇文本，請使用textContent例如：

 var element = document.querySelector('.name'); var dataAttribute = element.getAttribute('my-data'); console.log(dataAttribute, element.textContent);

 <div id="home"> <div class="name" my-data="123">Email: test@gmail.com</div> </div>

參考：

• 節點文本內容

Answer 2

使用自定義屬性時，請確保寫入“data-”，然后是屬性名稱的其余部分。 這樣做，您可以輕松地從 javascript 訪問數據。

<div class="name" data-something="123">Email: test@gmail.com</div> 

對於 js：

let element = document.querySelector('.name')
let dataAttribute = element.dataset.something