DOM进阶之HTMl属性操作（对象属性）

最新推荐文章于 2022-08-10 10:05:19 发布

Daniel_Alan

最新推荐文章于 2022-08-10 10:05:19 发布

阅读量838

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_41992047/article/details/94472508

版权

web 专栏收录该内容

44 篇文章

订阅专栏

1.HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。像下面例子中有一个input元素，指的就是操作它的id,type,value等，其他元素也类似。
<input id="btn" type="button" value="提交"/>
在JavaScript中，有两种操作HTML元素属性的方式，一种是”对象属性“，另外一种是使用”对象方法“。
涉及两种操作，
获取HTML属性值
设置HTML属性值

1.1获取HTML属性值
获取HTML元素的属性值一般是通过属性名，来找到该属性对应的值。
语法：
obj.attr
说明：
obj是元素名，一个DOM对象。所谓的DOM对象，指的是getElementById(),getElementsByTagName()等方法获取到的元素节点。
attr是属性名，对于一个对象来说，是通过"."运算符来获取它的属性值

```
<!DOCTYPE >
<html>
      <head>
            <title ></title>
            <meta charset="utf-8" />
            <script>
                 window.onload=function()
                  {
                        var oBtn=document.getElementById("btn");
                        oBtn.onclick=function()
                        {
                              alert(oBtn.id);
                        };
                  }
           </script>
      </head>
      <body>      
      <input id="btn" class="myBtn" type="button" value="获取" />
      </body>     
</html>
```

分析：
想要获得某个属性的值，首先需要使用getElementById()等方法找到这个元素节点，然后才可以获取到该属性的值。
oBtn.id=表示获取按钮的id属性值。同样的，想要获取type属性值可以写成oBtn.type,以此类推。但是如果想获取一个元素的class，写成"oBtn.class”是错误的，应该写成"oBtn.className()"
使用obj.attr这种方式，不仅可以用来获取静态HTML元素的属性值，还可以用来获取动态创建的DOM元素中的属性值。

举例：获取单选框的值

``
<!DOCTYPE >
<html>
     <head>
            <title ></title>
            <meta charset="utf-8" />
            <script>
                  window.onload=function()
                  {
                        var oBtn=document.getElementById("btn");
                        var oFruit=document.getElementsByName("fruit");
                     
                        oBtn.onclick=function()
                        {
                             //使用for循环遍历所有的单选框
                              for(var i=0;i<oFruit.length;i++)
                              {
                               //判断当前遍历的单选框是否选中（也就是checked是否为true)
                                    if(oFruit[i].checked)
                                   {
                                          alert(oFruit[i].value);
                                    }
                              }
                   };
                  }
      </script>
      </head>
      <body>
            <div>
                  <label><input type="radio" name="fruit" value="苹果" 
checked/>苹果</label>
                  <label><input type="radio" name="fruit" value="香蕉" 
checked/>香蕉</label>
                  <label><input type="radio" name="fruit" value="西瓜" 
checked/>西瓜</label>              
            </div>
            <input id="btn" type="button" value="获取" />
      </body>      
</html>

```

分析：
document.getElemensByName("fruit")表示获取所有name属性值为fruit的表单元素。getElementsByName()只限于表单元素，他获取的也是一个元素集合，也就是类数组。

举例：获取下拉列表的值

``
<!DOCTYPE >
<html>
      <head>
            <title ></title>
            <meta charset="utf-8" />
            <script>
                 window.onload=function()
                  {
                       var oBtn=document.getElementById("btn");
                       var oSelect=document.getElementById("select");                    
                        oBtn.onclick=function()
                        {
                              alert(oSelect.value);
                        };
                  }
            </script>
      </head>
      <body>
            <select id="select">
                 <option value="北京">北京</option>
                  <option value="上海">上海</option>
                  <option value="广州">广州</option>
                  <option value="深圳">深圳</option>
                  <option value="杭州">杭州</option>
                  <option value="合肥">合肥</option>
            </select>
            <input id="btn" type="button" value="获取" />
      </body>      
</html>

```

分析：
当用户选中哪一个option时，该option的value值就会自动变成当前的select元素的value值。其中value时传给后台处理的，而标签中的文本是给用户看的。这两个值大多时候是一个样的。

2.设置HTML属性值
设置HTML元素的属性值，同样也是通过属性名来设置的，非常简单。
语法：
obj.attr="值"
说明：
obj是元素名，他一个DOM对象，attr是属性名
举例：

```
<!DOCTYPE >
<html>
      <head>
            <title ></title>
            <meta charset="utf-8" />
            <script>
                  window.onload=function()
                  {
                        var oBtn=document.getElementById("btn");                     
                        oBtn.onclick=function()
                        {
                              oBtn.value="button";
                        };
                  }
            </script>
      </head>
      <body>            
            <input id="btn" type="button" value="修改" />
      </body>      
</html>


```

分析：
在前面章节创建元素时，也是使用obj.attr的方式来为元素设置属性的。当然对于动态DOM来说，我们不仅可以使用obj.attr，也可以使用下一节介绍的setAttribute()方法来实现

```
<!DOCTYPE >
<html>
      <head>
            <title ></title>
            <meta charset="utf-8" />
            <script>
                  window.onload=function()
                  {
                       var oBtn=document.getElementById("btn");
                        var oPic=document.getElementById("pic");
                        var flag=true;                                             
                        oBtn.onclick=function()
                        {
                              if(flag)
                             {
                                   oPic.src="images1.png";
                                    flag=false;
                              }
                              else{
                                    oPic.src="images.png";
                                    flag=true;
                              }
                        };
                  }
           </script>
      </head>
      <body>            
            <input id="btn" type="button" value="修改" /><br />
            <img id="pic" src="images.png" />
      </body>    
</html>
```

分析：
这里使用了一个布尔变量flag来标识两种状态，使两张图片可以来回切换。