重新釐清了一下 HTML 屬性與 JS 的關係，如何去叫用 HTML 裡面的屬性。我們可以把每個 HTML tag 想像成是一個物件，擁有自己的屬性，並且以 element.propertyName 的方式叫用。
以下例子，去判斷屬性名稱為特定姓名的話，將 placeholder 裡面的值修改。

HTML code:

<input type="json" name="Jason" placeholder="一">
<input type="json" name="John" placeholder="二">
<input type="json" name="Peter" placeholder="三">
<input type="json" name="Jim" placeholder="四">
<input type="json" name="Amy" placeholder="五">
<button class="changePlaceholder">Action</button>

JS code:

document.getElementsByClassName("changePlaceholder")[0].addEventListener('click',function(){
  document.querySelectorAll("INPUT").forEach(function(node){
    if (node.name == 'Jim') {
      node.placeholder = 'Jim'
    }
  })
})

但是在 HTML 裡面他不是一個真實的物件，不是你自己加上名稱就會擁有的，所以當我們要自訂屬性的時候，必須符合它的規則。把資料屬性在 HTML tag 裡寫成 data-propertyName，並在 JS 中用 element.dataset.propertyName 取值

說明：
自訂一個屬性，當按下按鈕，秀出屬性內容

HTML code

<h1 data-hint="insert Data" name="Jason">My Data</h1>
<button class="showData">Action</button>

JS code

document.getElementsByClassName("showData")[0].addEventListener('click',function(){
  var myData = document.getElementsByTagName("H1")[0].dataset
  alert(myData.hint)
})