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

向右看齐 2023-07-03 12:08 108阅读 0赞

## 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>

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