教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

如何獲取和移除DOM對象的屬性?

更新時間:2022年07月04日10時45分 來源:傳智教育 瀏覽次數(shù):

獲取屬性

在DOM對象中可以使用“element.屬性”的方式來獲取內(nèi)置的屬性值,但是DOM對象并不能直接使用點(diǎn)語法獲取到自定義屬性的值,那么如何獲取自定義屬性值呢?在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)置屬性值,但是在實際運(yùn)用中推薦使用“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



猜你喜歡:

jQuery對象和DOM對象互轉(zhuǎn)的方法

什么是DOM?DOM文檔樹模型的關(guān)鍵名詞解釋

JS獲取dom元素的方法有哪些?

什么是DOM?DOM文檔樹模型的關(guān)鍵名詞解釋

傳智教育HTML&JS+前端培訓(xùn)

0 分享到:
和我們在線交談!