原生js获取、设置、删除属性

1、获取属性
element.getAttribute(‘属性名’)； //返回指定元素属性名的属性值
element.getAttributeNode(‘属性名’)； //返回指定元素的属性名和属性值
element.attributes[‘属性名’]；//返回指定元素的属性名和属性值
如下例：

<div id="box" class="classa">
    这是一个段落
</div>
<script>
    var box=document.getElementById("box");
    var attr=box.getAttribute('class');
    console.log(attr);  //classa

    var attr2=box.getAttributeNode('id');
    console.log(attr2);  //id="box";

    var attr3=box.attributes['id'];
    console.log(attr3);  //id="box";
</script>

2、设置属性
element.setAttribute(name,value); //添加指定的属性，并为其赋指定的值。IE8及以下不支持
element.setAttributeNode(attrNode); //向元素中添加指定的属性节点,如果这个指定的属性已存在，则此方法会替换它。
如下例：

<div id="box" class="classa">这是一个段落</div>
<script>
    var box=document.getElementById("box");
    //设置属性
    box.setAttribute('class','classb');   
    console.log(box); //<div id="box" class="classb">这是一个段落</div>

    //先创建属性节点，再设置属性值，最后设置属性
    var attr=document.createAttribute('name');
    attr.nodeValue="p1";
    box.setAttributeNode(attr);
    console.log(box);  //<div id="box" class="classb" name="p1">这是一个段落</div>
</script>

3、删除属性
element.removeAttribute(‘属性名’); //删除指定的属性,此方法不返回值
element.removeAttributeNode(attrNode); //删除指定的属性，并以 Attr Node 对象返回被删除的属性。

<div id="box" class="classa">这是一个段落</div>
<script>
    var box=document.getElementById("box");
    //移除属性
    var attr=box.removeAttribute('class'); 
    console.log(box);  //<div id="box">这是一个段落</div>
    console.log(attr);  //undefined

    //先获取属性，在删除指定属性
    var attr2=box.getAttributeNode('id');
    var attr3=box.removeAttributeNode(attr2);
    console.log(box);    //<div>这是一个段落</div>
    console.log(attr2);  //id="box"
    console.log(attr3);  //id="box"
</script>