代码演示:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>js设置setAttribute、获取getAttribute、删除removeAttribute详细讲解 </title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <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", "number")
   
                //自定义属性值
                input.setAttribute("aa", "bb")
            }
   
         
            function getClick() {
                // getAttribute 输出input的type类型是password
                console.log(input.getAttribute("type"));
            }
   
            //removeAttribute 删除input的value值
            function deleteClick() {
                input.removeAttribute("value")
                input.removeAttribute("type")
                input.removeAttribute("ccc")
            }
        </script>
</html>
 
 
理解:
 
   ##  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
 
    删除属性值;
    如果移除不存在的属性值,并不会报错的哈。
    在echarts中就会使用removeAttribute这个方法
    主要是处理echarts第二次不会渲染