DOM自定义属性 getAttribute、setAttribute、removeAttribute

版权声明： https://blog.csdn.net/xiasohuai/article/details/83063661

elementNode.attributes：属性返回包含被选节点属性的 NamedNodeMap。

elementNode.getAttribute(name)：方法通过名称获取属性的值。

elementNode.setAttribute(name, value)：方法创建或改变某个新属性。

elementNode.removeAttribute(name)：方法通过名称删除属性的值。
 

<input type="text" class="inp" id="inp" value="123" abc="abc" style="font-size:111px"/>
<script>
    //获取对象
    var txt = document.getElementById("inp");
    // console.log(txt.abc);//JS通过.的方式不能获取自定义的属性
    // 1、 但是可以通过getAttribute可以获取到
    console.log(txt.getAttribute("abc"));
    console.log(txt.getAttribute("id"));
    console.log(txt.getAttribute("class"));
    console.log(txt.getAttribute("value"));
    // 控制台输出：abc   inp   inp  123
 
    // 2、setAttribute设置自定义属性,可以在浏览器中通过开发人员工具可以查看属性以及设置到input标签上
    txt.setAttribute("userName","inp");
    // 3、修改属性
    this.setAttribute("style","font-size:10px");
    // 4、removeAttribute移除自定义属性,同样在开发人员工具可以查看属性abc已经被移除掉了
    txt.removeAttribute("abc");
</script>

txt.attributes["myAttr"].value;   //通过attributes属性
txt.getAttribute("myAttr");       //使用getAttribute方法