更新時(shí)間:2022-07-01 來(lái)源:黑馬程序員 瀏覽量:
在DOM對(duì)象中可以使用“element.屬性”的方式來(lái)獲取內(nèi)置的屬性值,但是DOM對(duì)象并不能直接使用點(diǎn)語(yǔ)法獲取到自定義屬性的值,那么如何獲取自定義屬性值呢?在DOM中,可以使用getAttribute(屬性)方法來(lái)返回指定元素的屬性值。
下面我們通過(guò)案例演示如何獲取屬性值,示例代碼如下。
<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)置屬性值,但是在實(shí)際運(yùn)用中推薦使用“element.屬性”這種較為簡(jiǎn)潔的方式。第7行使用getAttribute('index)方式來(lái)獲取開發(fā)者自定義的index屬性,輸出結(jié)果為。
在DOM中使用“element.removeAttributef'屬性)”的方式來(lái)移除元素屬性。接下來(lái)我們通過(guò)案例演示如何移除屬性值,示例代碼如下。
<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元素,如圖所示。