js设置setAttribute、获取getAttribute、删除removeAttribute详细讲解

setAttribute的理解

所有主流浏览器均支持 setAttribute() 方法。
element.setAttribute(keys,cont)

keys==>必需(String类型)。您希望添加的属性的名称
cont==>必需（String类型）。您希望添加的属性值 

使用场景:可以设置元素的属性类型。
<input value="3652" id="inputdemo" type="password">
最初是密码框，我们使用这个方法可以设置为file类型
同时它也可以设置自定义的属性值
比如
inputdemo.setAttribute("aa", "bb")

getAttribute

获取元素的属性值，如果存在返回对应的值
不存在返回null
<input value="3652" id="inputdemo" type="password">
返回password哈
console.log(input.getAttribute("type"));
由于不存在aa这个属性，所以返回null
console.log(input.getAttribute("aa"));

removeAttribute

删除属性值；
如果移除不存在的属性值，并不会报错的哈。
在echaers中就会使用removeAttribute这个方法
主要是处理echarts第二次不会渲染

通过案例了解这几个值

<body>
    <div>
        <input value="3652" id="inputdemo" type="password">
        <input type="button" onClick="setClick()" value="点击设置">
        <input type="button" onClick="getClick()" value="点击查询">
        <input type="button" onClick="deleteClick()" value="点击删除">
    </div>
    <script>
        var input = document.getElementById('inputdemo');
        // setAttribute 设置input的type为file
        function setClick() {
            input.setAttribute("type", "file")

            //自定义属性值
            input.setAttribute("aa", "bb")
        }

        // getAttribute 输出input的type类型是password
        function getClick() {
            console.log(input.getAttribute("type"));
        }

        //removeAttribute 删除input的value值
        function deleteClick() {
            input.removeAttribute("value")
            input.removeAttribute("type")
            input.removeAttribute("ccc")
        }
    </script>

作者：明月人倚楼
出处：https://www.cnblogs.com/IwishIcould/

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！

万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

支付宝

微信

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。