JS的DOM操作(3). 操作属性的方法Attribute()

getAttribute();

使用这个方法可以获取到特性的值.当然也可以获取到自定义特性的值,下面的代码就演示了.
我们也可以通过DOM元素本身的属性来访问,不过只有公认的(非自定义的)特性才会以属性的形式添加到DOM对象中下面代码也演示了当我用getAttribute()方法访问my_attribute属性时,就可以获取到它的值.但是我用DOM元素本身的属性来访问时就输出undefined.
-----------另
我用getAttribute()和DOM本身的属性也访问了align和title属性时,也可以访问的到,这是因为align和title在HTML中是div的公认特性.

   <div class="box" title = "body" align = "left" my_attribute = "hello"></div>
    <script>
     var div = document.querySelector("div");
     console.log(div.getAttribute("class"));        //box
     console.log(div.getAttribute("title"));        //body
     console.log(div.title);        //body
     console.log(div.getAttribute("align"));        //left    
     console.log(div.align);        //left
     console.log(div.getAttribute("my_attribute")); //hello             
     console.log(div.my_attribute);                 //undefined
    </script>

setAttribute();

顾名思义,这个方法是设置属性,这个方法接受两个参数 即要设置的特性名和值,如果该特性已经存在,就会以指定的值替换现有的值;如果不存在,则创建该属性并设置相应的值

 
    <div id = "dd"></div>
    <script>
     var div = document.querySelector("div");
        div.setAttribute("class","box");  //就会看到div里设置了class属性值为box.
        div.setAttribute("id","cc");      //就会把原有id的值变成了cc
    </script>

当然有设置属性的方法那就有删除属性的方法

removeAttribute();

这个方法彻底删除元素的特性.调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性.

    <div id = "dd"></div>
    <script>
     var div = document.querySelector("div");
        div.removeAttribute("id");  //就会把id这个属性和值都删掉
    </script>

这三个方法希望大家了解 后续会继续加油