在用DOM操作控制HTML時，很多初學者會把 點操作符+屬性名 與getAttribute("屬性名") 混淆，誤以為這兩種方法是等價的。

實際上，

• 通過getAttribute("屬性名")和setAttribute("屬性名","屬性值") 可以獲取或修改標籤上的屬性值
• 通過 點操作符+屬性名 可以獲取或修改元素對應的DOM物件的屬性值

這兩種方法並不相同，不可混為一談

舉個栗子：
HTML程式碼：

<p id="name" align="left" title="名字" test="測試">妙音天女</p>

JS程式碼：

    var myname=document.getElementById("name");//myname是HTMLParagraphElement型別的DOM物件

    console.log(myname.title);//名字 //HTMLParagraphElement具有title屬性（繼承自父類HTMLElement）
    console.log(myname.getAttribute("title"));//名字 //p標籤具有title屬性（html標籤的全域性屬性）

    console.log(myname.align);//left //HTMLParagraphElement具有align屬性
    console.log(myname.getAttribute("align"));//left //p標籤具有align屬性

    console.log(myname.test);//undefined//HTMLParagraphElement型別的myname物件沒有test屬性
    console.log(myname.getAttribute("test"));//測試 //此處的p標籤具有自定義的test屬性

    console.log(myname.innerHTML);//妙音天女 //HTMLParagraphElement具有innerHTML屬性（繼承自祖父類Element)
    console.log(myname.getAttribute("innerHTML"));//null //p標籤沒有innerHTML屬性

    myname.hi="hello";
    console.log(myname.hi);//hello //myname物件具有hi屬性
    console.log(myname.getAttribute("hi"));//null //p標籤沒有hi屬性
 

我們可以清晰地看到，

• 對於HTML標籤和相應的DOM物件都具有的屬性（如例子中的title屬性和align屬性），兩種方法取得的值是相同的
• 對於HTML標籤具有而DOM物件不具有的屬性（通常是標籤上的自定義屬性，如例子中的test屬性，或data-* 屬性），getAttribute()可以取得相應的屬性值，但點操作符返回undefined
• 對於DOM物件具有而HTML標籤不具有的屬性（如例子中的innerHTML和物件上自定義的hi屬性），點操作符可以取得相應的屬性值，但getAttribute()返回null

注：p標籤對應的DOM型別是HTMLParagraphElement，其父型別是HTMLElement，詳見我的另一篇部落格：

分類: 前端

來源：https://www.cnblogs.com/xuehaoyue/p/6638202.html