DOM對象中如何獲取屬性值和移除屬性值？

更新時間:2022-07-01 來源:黑馬程序員瀏覽量:

獲取屬性

在DOM對象中可以使用“element.屬性”的方式來獲取內(nèi)置的屬性值，但是DOM對象并不能直接使用點語法獲取到自定義屬性的值，那么如何獲取自定義屬性值呢?在DOM中，可以使用getAttribute(屬性)方法來返回指定元素的屬性值。

下面我們通過案例演示如何獲取屬性值，示例代碼如下。

<body>
  <div id="demo" index="1"></div>
  <script>
    var div = document.querySelector('diy');
    console.log(div.id);                  //結(jié)果為：demo
     console.log(div.getAttribute('id'));      //結(jié)果為：demo
    console.log(div.getAttribute('index'));   //結(jié)果為：1
  </script>
</body>

上述代碼中，第5、6行代碼分別使用element.屬性和element.getAttributeo兩種方式獲取div元素的內(nèi)置屬性id，輸出結(jié)果為demo。雖然以上兩種方式都可以獲取內(nèi)置屬性值，但是在實際運用中推薦使用“element.屬性”這種較為簡潔的方式。第7行使用getAttribute('index)方式來獲取開發(fā)者自定義的index屬性，輸出結(jié)果為。

移除屬性

在DOM中使用“element.removeAttributef'屬性)”的方式來移除元素屬性。接下來我們通過案例演示如何移除屬性值，示例代碼如下。

<body>
  <div id="test" class""footer" index="2"></div>
  <script>
    var div = document.querySelector('div');
    div.removeAttribute('id');
    div.removeAttribute('class');
    div.removeAttribute('index');
  </script>
</body>

上述代碼中，第5～7行代碼使用 removeAtribute)方法移除div元素的id、class、 index屬性。在瀏覽器中查看div元素，如圖所示。

1656665175699_移除屬性值.png